CSS3-弹性盒模型

1. flex 和 inline-flex

• flex： 将对象作为弹性伸缩盒显示
• inline-flex：将对象作为内联块级弹性伸缩盒显示

flex :是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

2. flex-direction （属性规定项目的方向）

• row （默认值）; 灵活的项目将水平显示，正如一个行一样
• row-reverse 与 row 相同，但是以相反的顺序。 尝试一下
• column 灵活的项目将垂直显示，正如一个列一样
• column-reverse 与 column 相同，但是以相反的顺序

3. flex-wrap ( 属性规定flex容器是单行或者多行 )

• nowrap 默认值。规定灵活的项目不拆行或不拆列。
• wrap 规定灵活的项目在必要的时候拆行或拆列。
• wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

wrap-reverse 是整体一行在反方向；这里需要注意

4. justify-content （基于主轴的对齐方式）

• flex-start （默认值）项目位于容器的开头
• flex-end 项目位于容器的结尾
• center 项目位于容器的中心
• space-between 项目位于各行之间留有空白的容器内
• space-around 项目位于各行之前、之间、之后都留有空白的容器内

5. align-items （基于交叉轴的对齐方式）

align-content （多行的时候才会奏效）
stretch
默认值。元素被拉伸以适应容器。
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

center

元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

flex-start

元素位于容器的开头。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end

元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

baseline

元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐 ( 例如基于文字的基线进行对齐).0

6. order (设置弹性盒模型对象的子元素出现的順序)

默认值是 0；order : 0

设置在子元素上的，那个项目的值小，那个项目顺序排列在左前面 ；例如：order : 1 和 order : -2:；设置 -2 的值小，所以排列在前面。
注意：order属性的默认值是 0 ；如果设置了项目order : 1 ； 其余的项目的默认值是order : 0；所以设置了的项目会排列在其余项目之后。

7. align-self （子项目基于交叉轴的对齐方式）

设置于项目的属性；属性值跟 align-items 差不多相同；优先级要大于 align-items，小于多行属性设置的对齐方式；例如：align-content等。

8. flex-grow （属性用于设置或检索弹性盒子的扩展比率）

设置了 flex-grow 属性之后；会把剩下的剩余空间分刮，并按照设置的 flex-grow 属性值比率扩展
如果自身的宽高超出容器的大小，那么这个属性将没有作用。

9. flex-basis （覆盖掉宽度）

超出容器大小，按照容器的最大值计算。

用法：

flex-basis：150px

10. flex-shrink (收缩属性 ，默认值为1)

收缩比例原理：

• 先计算所有的（子项目真实内容区宽度 * flex-shrink 设置的值 ）的总和
• 收缩值 =（子项目真实内容区的宽度 * flex-shrink 设置的值 ）/ 总和 * 子项目的真实内容区宽度