flex弹性盒属性简介

野性酷女 2023-07-13 10:56 66阅读 0赞

本文参考：[菜鸟教程CSS 参考手册][CSS]  
声明：本文属性不全，什么时候用到，什么时候贴过来。

#### display: flex; ####

开启弹性盒旅程。

#### flex ####

简介：flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

*  flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

最常用：flex:1;（让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：）

属性值：

*  默认值： 0 1 auto；
 *  flex-grow： 一个数字，规定项目将相对于其他灵活的项目进行扩展的量；
 *  flex-shrink： 一个数字，规定项目将相对于其他灵活的项目进行收缩的量；
 *  flex-basis： 项目的长度（合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字）；
 *  auto： 与 1 1 auto 相同；
 *  none： 与 0 0 auto 相同；
 *  initial： 设置该属性为它的默认值，即为 0 1 auto；
 *  inherit： 从父元素继承该属性。

#### justify-content ####

简介：justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

属性值：

*  flex-start： **默认值**，项目位于容器的开头；
 *  flex-end ： 项目位于容器的结尾；
 *  center： 项目位于容器的中心；
 *  space-between： 项目位于各行之间留有空白的容器内；
 *  space-around： 项目位于各行之前、之间、之后都留有空白的容器内；
 *  initial： 设置该属性为它的默认值；
 *  inherit： 从父元素继承该属性。

（实例测试：[菜鸟驿站 justify-content属性测试][justify-content]）

#### align-items ####

简介：align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。  
提示：使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。

属性值：

*  stretch：元素被拉伸以适应容器；
    
    > 如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
 *  center： 元素位于容器的中心；
    
    > 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
 *  flex-start： 元素位于容器的开头；
 *  flex-end： 元素位于容器的结尾；
 *  baseline： 元素位于容器的基线上；
    
    > 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
 *  initial： 设置该属性为它的默认值；
 *  inherit： 从父元素继承该属性。

（实例测试：[菜鸟驿站 justify-content属性测试][justify-content 1]）

[CSS]: https://www.runoob.com/cssref/css-reference.html
[justify-content]: https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-start
[justify-content 1]: https://www.runoob.com/try/playit.php?f=playcss_align-items&preval=stretch