CSS布局技巧（四）｜青训营弹性布局（Flexbox） align-content:flex-start; 该属性表示

本篇介绍弹性布局（Flexbox）的最后一个容器属性————align-content。它是用于控制容器内多行或者多列子元素在交叉轴上的对齐方式的属性，它共有六个取值。

align-content:flex-start;

该属性表示多行或者列的子元素会沿着交叉轴的起始位置对齐。但是这个属性会受父元素的主轴方向影响。注意当子元素只有单行时，该属性并不生效。即具体的布局效果如图所示：

$FU{$N{6}{L(PV%M7}DG4_0C.png$ 此时如若想改动最小，就使元素生效只需要给父元素增加一个宽度，以及一个flex布局的换行属性flex-wrap: wrap; 此时的效果如图所示：

TLV$WA{KRZD5LV%8BXFT0LH.png

这里可以看出布局效果已经实现了。

该属性表示多行或者列的子元素会沿着交叉轴的末尾位置对齐。注意的点依然与上一条属性相同。当该属性生效时，具体的布局效果如图所示：

这里已经很明显可以看出，子元素是沿着盒子三所在的那一行对齐的。

该属性表示多行或者列的子元素会沿着交叉轴的中央位置对齐，也是常说的居中显示。布局效果如图所示：

这个的效果很明显，在这里就不过多描述了。

该属性表示在交叉轴上均匀分布多行或者列子元素，首行对齐父元素容器起始位置，末行对齐父元素容器末尾位置。其实也就是通常所说的两端对齐。效果如图所示：

这里可以看出，上侧是对齐与盒子1、2的上端，下侧是对齐与位于第二行的盒子3的下端。

该属性的效果是使每行（或列）两侧留有相等的空间。为了让布局效果更明显，我将子元素的盒子增加到三行，这样可以更为直观的观察每行之间的距离是否相等。效果如图所示：

这里可以看出每列之间的距离确实是相等的。

这个属性就是默认效果，即拉伸多行或列，使子元素以填充满整个交叉轴。如图所示：

到这里flexbox的所有容器属性已经记录完了。