CSS |对齐内容属性

CSS 对齐内容属性（align-content）可控制容器内的多行内容在垂直方向上的排列方式。

语法

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

属性值

| 值 | 描述 | |---------------------|---------------------------------------------------------------| | flex-start | 多行内容向容器的起始位置对齐。 | | flex-end | 多行内容向容器的结束位置对齐。 | | center | 多行内容居中对齐。 | | space-between | 多行内容平均分布在容器内，两端不留间隔。 | | space-around | 多行内容平均分布在容器内，两端留有间隔。 | | stretch | 多行内容拉伸以填满容器。当内容总高度小于容器高度时，也会拉伸。| | initial | 值设置为默认值。 | | inherit | 继承父元素的 align-content 值。 |

示例

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

.container {
  display: flex;
  height: 200px;
  flex-wrap: wrap;
  align-content: space-between;
}

.container div {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  margin: 10px;
}

效果：

在这个示例中，我们使用 flex-wrap 让内容在纵向方向上产生了多行。然后使用 align-content 来控制各行内容的垂直排列方式。本示例使用了 space-between 来让各行之间平均分布，两端不留间隔。

浏览器兼容性

align-content 属性可以在现代浏览器中得到支持。对于 less-capable 浏览器，可以使用 align-items 和 justify-content 来代替。