#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;
每一行仅仅占用实际所需的空间。剩余空间平均分配给行元素之间(上下)。