CSS3 总结（二十）——弹性盒子（CSS3）

弹性盒子

可用于伸缩布局（即浏览器窗口拉伸的时候，元素会跟着拉伸）。
注意：因为该语法规范版本较多，浏览器支持不一致，所以Flexbox布局使用较少。

相关内容请查阅：
https://www.runoob.com/css3/css3-flexbox.html

属性解释（链接中可能有些部分读者不理解或者有错）：
1.flex（用在弹性子元素）：子项目在主轴的缩放比例，如果弹性子元素不指定flex属性，则不参与伸缩分配。

2.在弹性容器中可以设置min-width、max-width属性来限制弹性子元素的最小及最大缩放宽度。（用在弹性容器）

3.flex-direction 属性（用在弹性容器）：指定了弹性子元素在父容器中的位置。

值	说明
row	横向从左到右排列（左对齐），默认的排列方式。
row-reverse	反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column	纵向排列。
column-reverse	反转纵向排列，从后往前排，最后一项排在最上面。

4.justify-content（用在弹性容器）：设置弹性盒子元素在主轴（横轴）方向上的对齐方式。

5.align-items（用在弹性容器，单行使用）：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

部分值	说明
flex-end	元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）结束位置的边界紧靠住该行的侧轴结束边界。
stretch	默认值。元素被拉伸以适应容器。如果指定侧轴大小（就是弹性元素的height）的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。（即遵循min/max-width/height条件下把高度调到跟弹性容器的高度一样，前提是弹性元素未指定高度）

6.flex-wrap（用在弹性容器）：设置弹性盒子的子元素超出父容器时是否换行。如果元素不是弹性盒对象的元素，则 flex-wrap 属性不起作用。

值	说明
nowrap	默认值，规定灵活的项目不拆行或不拆列。（即不换行，收缩显示，强制显示在一行。）
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。（可以说是翻转）

7.align-content（用在弹性容器，由flex-wrap产生的多行时使用）：多行垂直对齐方式。针对flex容器里面多轴（多行）的情况，类似 align-items（单行使用）, 但不是设置子元素对齐（就是不修改flex-direction属性），而是设置行对齐。
注意：使用前提，父元素display：flex、flex-direction：row、并设置换行flex-wrap：wrap（总的来说就是实现多行）；这样才起作用。

8.order（用在弹性子元素）：设置弹性盒子的子元素排列顺序。如果元素不是弹性盒对象的元素，则 order 属性不起作用。默认值是 0，可以为负值，数值越小越在前。