弹性盒子（flex布局）

传统布局：

• 兼容性好
• 布局繁琐
• 局限性，不能再移动端很好的布局

flex弹性布局：

• 操作方便，布局极为简单，移动端应用广泛
• PC端浏览器支持情况较差

布局原理

flex意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

即通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

• 当我们为父盒子设置flex布局后，子元素的float、clear和vertical-align属性都将失效。
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

常见的父项属性

flex-direction：设置主轴的方向（主轴和侧轴是会变化的，就看该属性设置谁为主轴，剩下的就是侧轴。而子元素的跟着主轴来排列的）

值	说明
row	默认值。从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

justify-content：设置主轴上的子元素排列方式（使用前必须确定好主轴是哪个）

值	说明
flex-start	默认值。从头部开始，如果x轴是主轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果x轴是主轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

flex-wrap：设置子元素是否换行（flex布局中，默认情况下子元素都排列在一条线上，且默认是不换行的，如果装不下，则会缩小子元素的宽度，放到父元素里面）

值	说明
nowrap	默认值。不换行
wrap	换行

align-content：设置侧轴上的子元素的排列方式，只能用于子项出现换行的情况（多行）

值	说明
flex-start	默认值。从上到下
flex-end	从下到上
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子元素高度平分父元素高度

align-items：设置侧轴上的子元素排列方式，在子项为单项的时候使用（单行）

值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	（默认值）拉伸，子元素不要给高度（会使所有的子元素沿着侧轴的方向拉伸以填充容器）

flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap。

常见的子项属性

flex：定义子项目分配剩余空间，用flex来表示占多数份数。

align-self：控制子项自己在侧轴上的排列方式。（运行单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch）

order：定义项目的排列顺序。（数值越小，排列越靠前，默认为0.）