新!我的 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;

每行将只填充其需要的空间。剩余空间将在行周围平均分配:在第一行之前,在两行之间,以及在最后一行之后。