Flexbox 常见问题解析：align-items 和 align-self 有什么区别？-JavaScript中文网-JavaScript教程资源分享门户

在 Flexbox 中，有很多属性可以用来对子元素进行布局控制。其中 align-items 和 align-self 是两个经常被混淆和使用不当的属性。本文将通过详细的解析和示例代码，帮助你更好地理解它们的区别和用法。

align-items

align-items 是一个容器属性，用于定义子元素在交叉轴（即垂直于主轴的轴）上的对齐方式。比如，我们可以将子元素垂直居中对齐，或者将子元素顶部或底部对齐等。

align-items 的可取值如下：

stretch（默认值）：子元素会被拉伸以填满交叉轴空间；
flex-start：子元素在交叉轴的起始位置对齐；
flex-end：子元素在交叉轴的末尾位置对齐；
center：子元素在交叉轴的中心位置对齐；
baseline：子元素在交叉轴的基线位置对齐。

以下是一个示例代码：

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

// javascriptcn.com 代码示例
.container {
  display: flex;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
}

.item {
  width: 50px;
  height: 50px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 50px;
  margin-right: 10px;
}

上面的代码将子元素在交叉轴上居中对齐。

align-self

align-self 是一个子元素属性，用于定义该子元素在交叉轴上的对齐方式。与 align-items 的区别是，align-self 只对当前子元素生效，而 align-items 作用于所有子元素。

align-self 的可取值与 align-items 相同，但它可以覆盖 align-items 的设置。比如，我们可以将一个子元素在交叉轴上顶部对齐，而其他子元素仍然保持居中对齐。

以下是一个示例代码：

<div class="container">
  <div class="item">1</div>
  <div class="item" style="align-self: flex-start;">2</div>
  <div class="item">3</div>
</div>

// javascriptcn.com 代码示例
.container {
  display: flex;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
}

.item {
  width: 50px;
  height: 50px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 50px;
  margin-right: 10px;
}

上面的代码将第二个子元素在交叉轴上顶部对齐，而其他两个子元素保持居中对齐。

总结

在使用 Flexbox 进行布局时，align-items 和 align-self 都是非常有用的属性。它们可以让我们控制子元素在交叉轴上的对齐方式，从而实现更多样化的布局效果。

与 align-items 不同的是，align-self 作用于单个子元素，可以覆盖 align-items 的设置。使用时需要根据具体的布局需求来选择使用哪个属性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6528d4be7d4982a6ebb61b53