深入理解 CSS3 弹性盒布局模型（5）容器中的条目

look_w

交叉轴空白处理当容器在交叉轴方向上有空白空间时，属性"align-content"用来对齐容器中的行。该属性的作用类似于"justify-content"，只不过"justify-content"是在主轴方向上对齐行中的条目。当容器中只有单行时，该属性不起作用。属性"align-content"的可选值和含义如 所示，实际的布局效果见 。
表 5. 属性“align-content”的可选值和含义属性值含义flex-start行集中于容器的交叉轴起始位置。第一行与容器在交叉轴起始方向上的边界保持对齐，其余行按照顺序依次排列。flex-end行集中于容器的交叉轴结束位置。第一行与容器在交叉轴结束方向上的边界保持对齐，其余行按照顺序依次排列。center行集中于容器的中央。行都往容器的中央排列，在交叉轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则行会在两个方向上超出同样的空间。space-between行在容器中均匀分布。第一行与容器在交叉轴起始方向上的边界保持对齐，最后一行与容器在交叉轴结束方向上的边界保持对齐。空白空间在行之间平均分配，使得相邻行之间的空白尺寸相同。space-around类似于 space-between，不同的是第一行条目和最后一个行目与容器行的边界之间同样存在空白空间，而该空白空间的尺寸是行目之间的空白空间的尺寸的一半。stretch伸展行来占满剩余的空间。多余的空间在行之间平均分配，使得每一行的交叉轴尺寸变大。
图 4.    属性“align-content”的不同值的布局效果