Skip to main content

align-content 属性

Docs

align-content - CSS：层叠样式表 | MDN (mozilla.org)

align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似

  • stretch（默认值）：与 align-items 的 stretch 类似
  • flex-start：与 cross start 对齐
  • flex-end：与 cross end 对齐
  • center：居中对齐
  • space-between：
    • flex items 之间的距离相等
    • 与 cross start、cross end 两端对齐
  • space-around：
    • flex items 之间的距离相等
    • flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半
  • space-evenly：
    • flex items 之间的距离相等
    • flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离

align-content 属性用于控制多行或多列项目之间的对齐方式，仅适用于 flex 容器或 grid 容器的多行或多列情况。

align-content 属性的可选值如下：

  • stretch：默认值，项目将被拉伸以适应容器的高度或宽度。
  • flex-start：所有行或列都靠容器的起始边缘对齐。
  • flex-end：所有行或列都靠容器的结束边缘对齐。
  • center：所有行或列都居中对齐。
  • space-between：各行或各列之间平均分布，首行或首列在容器的起始边缘，末行或末列在容器的结束边缘。
  • space-around：各行或各列之间平均分布，每行或每列两侧留有相等的间距。
  • space-evenly：各行或各列之间平均分布，每行或每列之间的间距相等。

例如，如果你有一个垂直方向上的 flex 容器，其中包含了多行项目，那么 align-content 属性将决定这些行在容器内的垂直对齐方式。

  • 如果你将 align-content 设置为 flex-start，则所有行都将靠容器的顶部对齐。
  • 如果你将其设置为 flex-end，则所有行都将靠容器的底部对齐。
  • 如果你将其设置为 center，则所有行都将沿着容器的垂直中心线对齐。
  • 如果你将其设置为 space-between，则各行之间将平均分布，并且首行将靠容器的顶部，末行将靠容器的底部。
  • 如果你将其设置为 space-around，则各行之间将平均分布，并且每行两侧留有相等的间距。
  • 如果你将其设置为 space-evenly，则各行之间将平均分布，并且每行之间的间距相等。
Details