新!我的 44 页电子书“CSS 在 44 分钟内”出版了!😃
#align-content
定义每行如何在弹性盒子/网格容器中对齐。仅当存在 flex-wrap: wrap
且存在多行弹性盒子/网格项目时才适用。
default
align-content: stretch;
每行将拉伸以填充剩余空间。
在本例中,容器的高度为 300px
。所有框的高度均为 50px
,除了第二个框的高度为 100px
。
- 第一行的高度为 100px
- 第二行的高度为 50px
- 剩余空间为 150px
此剩余空间在两行之间平均分配
- 第一行的高度现在为 175px
- 第二行的高度现在为 125px
align-content: flex-start;
每行将只填充其需要的空间。它们将全部移向弹性盒子/网格容器的横轴的起点。
align-content: flex-end;
每行将只填充其需要的空间。它们将全部移向弹性盒子/网格容器的横轴的终点。
align-content: center;
每行将只填充其需要的空间。它们将全部移向弹性盒子/网格容器的横轴的中心。
align-content: space-between;
每行将只填充其需要的空间。剩余空间将出现在行之间。
align-content: space-around;
每行将只填充其需要的空间。剩余空间将在行周围平均分配:在第一行之前,在两行之间,以及在最后一行之后。