align-content 是 CSS 中用于设置多行内容的对齐方式的属性。该属性用于控制多个轴线(flex container 中的交叉轴线)在弹性容器中的分布。align-content 可以在具有多行的弹性容器中生效,而在单行的弹性容器中是无效的。

语法:
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: space-between;
}

在上述示例中,.container 是一个弹性容器,通过 align-content: space-between; 设置多行轴线的分布方式为两侧平均分布,相邻轴线之间没有间隔。

请注意,align-content 主要用于控制多行情况下的轴线对齐方式。如果弹性容器只有一行(flex-wrap: nowrap;),align-items 属性更常用,用于控制单行的轴线在交叉轴上的对齐方式。


转载请注明出处:http://www.pingtaimeng.com/article/detail/5975/CSS