CSS align-content 属性

align-content 属性用于控制多行元素在交叉轴上的对齐方式。该属性只对具有多行元素的容器有效，即 flex-wrap: wrap 或 flex-wrap: wrap-reverse。

语法

.container {
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

• stretch：默认值，元素被拉伸以占据整个交叉轴空间。
• flex-start：元素在交叉轴的起始位置对齐。
• flex-end：元素在交叉轴的末尾位置对齐。
• center：元素在交叉轴的中间位置对齐。
• space-between：元素在交叉轴上均匀分布，首尾两端不留空隙。
• space-around：元素在交叉轴上均匀分布，首尾两端留有相同的空隙。

示例

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

在上面的示例中，容器 .container 中的多行元素会在交叉轴的中间位置对齐。

注意事项

• align-content 只对具有多行元素的容器有效，如果容器中的元素只有一行，则该属性不生效。
• align-content 与 align-items 的区别在于，align-content 适用于多行元素的对齐方式，而 align-items 适用于单行元素的对齐方式。