对齐元素，把握 CSS 中的 align-items 与 align-content

最浅显易懂的 CSS 之 align-items 与 align-content

在 CSS 的 flex 布局中，我们经常会用到两个属性：align-items 和 align-content。这两个属性都与对齐元素有关，但它们的作用却略有不同。今天，我们就来详细了解一下这两个属性的用法和区别。

align-items

align-items 属性用于定义子元素在 flex 容器中的对齐方式。它可以取以下几个值：

• flex-start：子元素在容器顶部对齐。
• flex-end：子元素在容器底部对齐。
• center：子元素在容器中间垂直对齐。
• stretch：子元素拉伸以填满整个容器。
• baseline：子元素根据其基线对齐。

align-content

align-content 属性用于定义 flex 容器中多行子元素的垂直对齐方式。它可以取以下几个值：

• flex-start：子元素在容器顶部对齐。
• flex-end：子元素在容器底部对齐。
• center：子元素在容器中间垂直对齐。
• space-between：子元素之间均匀分布，两端与容器边缘对齐。
• space-around：子元素之间均匀分布，且与容器边缘也均匀分布。

align-items 与 align-content 的区别

align-items 和 align-content 的主要区别在于，align-items 控制的是子元素在 flex 容器中的水平对齐方式，而 align-content 控制的是 flex 容器中多行子元素的垂直对齐方式。

使用场景

• align-items 通常用于将子元素在容器中水平居中对齐，或者将子元素与容器顶部或底部对齐。
• align-content 通常用于将 flex 容器中多行子元素垂直居中对齐，或者将子元素与容器顶部或底部对齐。

示例

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

.item {
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

在这个例子中，align-items 属性将子元素在 flex 容器中水平居中对齐，而 align-content 属性将 flex 容器中多行子元素垂直居中对齐。

总结

align-items 和 align-content 是两个非常有用的 CSS 属性，它们可以帮助我们轻松地对齐元素。只要我们理解了这两个属性的用法和区别，就能熟练地使用它们来创建出各种布局。