一篇文章包你学会Flex布局

Flexible Box

Flexible Box是一种新的排版上下文，它可以控制子级盒子的以下样式：

• 摆放的流向
• 摆放顺序
• 盒子宽度与高度
• 水平和垂直方向的对齐
• 是否允许折行

设置给父元素的属性

生成Flex容器

• 使用display:flex使元素生成一个块级Flex容器
• 使用display:inline-flex使元素生成一个行级Flex容器

flex-direction:控制摆放流向

可选值：

• row：从左到右
• row-reverse：从右到左
• column：从上到下
• column-reverse：从下到上

flex-wrap：控制容器内元素是否换行

可选值：

• nowrap：默认值，不换行，如果一行元素过多则会自动调整元素宽度
• warp：在一行元素过多时使多余元素换行

justify-content：子元素在主轴上的排列方式

可选值：

• flex-start：从主轴开始的方向排列
• flex-end：从主轴结束的方向排列
• center：在主轴中对齐
• space-between：先两边贴边，再平分剩余空间
• space-around：平分剩余空间

如下图所示：

align-items：子元素在侧轴方向上的排列方式（单行）

可选值：

• flex-start：从侧轴开始的方向排列
• flex-end：从侧轴结束的方向排列
• center：在侧轴中对齐
• stretch：每个元素高度拉伸至容器高度
• baseline：每个元素的基线对齐

如下图所示：

align-content：设置子元素在侧轴方向上的排列方式（多行）

• flex-start：从侧轴开始的方向排列
• flex-end：从侧轴结束的方向排列
• center：在侧轴中对齐
• space-between：子元素在侧轴先分布在两边，在平分剩余空间
• space-around：子元素在侧轴平分剩余空间
• stretch：设置子元素高度平分容器高度

如下图所示：

设置给子元素的属性

Flexibility:控制容器内元素宽度

该属性可以设置子元素的弹性，即当容器内有剩余空间时，会伸展；当容器内空间不够时，会收缩。

• flex-grow：有剩余空间时的伸展能力

.a,.b,.c{
width:100px;
}
.a,.b{
flex-grow:1;
}

以上代码为a,b两个元素设置了flex-grow属性，则当容器空间剩余时，剩余空间平均会分配给a,b元素 。

• flex-shrink：容器空间不足时收缩的能力
• flex-basis：没有伸展或收缩时的基础长度

使用flex属性可以同时设置以上三个属性

.a{
flex:1 1 auto
}

 order：规定了容器中子元素的顺序

一般子元素的order属性默认值都为0，当为其中某一个子元素设置一个order属性为比0大的值时，该元素会排列在其他元素后面。