Flexbox 技巧：使用 align-self 属性控制元素的对齐方式-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常遇到对齐元素的需求。传统的做法是通过给父元素设置 display: flex; 然后利用 justify-content 和 align-items 属性来控制对齐。但是有些时候，我们想要对单个子元素进行对齐操作，此时就需要用到 align-self 属性了。

align-self 属性

align-self 是 flexbox 中的一个属性，主要用来控制单个子元素在交叉轴上的对齐方式。它只作用于当前元素，不影响其他子元素的对齐方式。

该属性的可选值包括：auto、flex-start、flex-end、center、baseline、stretch。

auto：默认值，元素会继承其父元素的 align-items 属性，如果父元素没有设置 align-items 属性，则等同于 stretch。
flex-start：子元素向交叉轴起点对齐。
flex-end：子元素向交叉轴结束点对齐。
center：子元素在交叉轴上居中对齐。
baseline：子元素以基线对齐。
stretch：子元素拉伸至与父元素相同的高度或宽度。

使用 align-self 属性的实例

下面我们来看一个例子，使用 align-self 控制单独的子元素的对齐方式：

<div class="container">
  <div class="item"></div>
  <div class="item align-self-center"></div>
  <div class="item"></div>
</div>

// javascriptcn.com 代码示例
.container {
  display: flex;
  align-items: center;
  height: 400px;
}

.item {
  width: 100px;
  height: 100px;
  background-color: pink;
}

.align-self-center {
  align-self: center;
}

在这个例子中，我们使用了 align-self:center; 控制第二个子元素在交叉轴上居中对齐，并且由于没有设置 justify-content 属性，flex-start 属性设置了主轴上的对齐方式，从而让它们在主轴上呈现左中右的排列。

总结

使用 align-self 属性可以让我们对单个子元素进行更加精细的对齐控制，避免了修改整个父元素的样式的麻烦。但需要注意的是，该属性只适用于子元素进行单独控制，只能在 flexbox 布局中使用。希望本文能够对你有所帮助，欢迎分享给更多的朋友。

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