#align-content

定义 flexbox 容器中每一行的对齐方式。此属性仅当预先设置了 flex-wrap: wrap 后有效,且 flexbox 的子元素有多行

默认属性 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;

每一行仅仅占用实际所需的空间。剩余空间平均分配给行元素之间(上下)