CSS Flexbox 布局是一种强大的布局方式，它使得 CSS 布局变得非常灵活而又易于使用。在 Flexbox 布局中，align-self 属性用于控制 flex 元素自身在交叉轴上的对齐方式，它可以覆盖与 flex 容器相关的 align-items 属性。
align-self 的取值
align-self 属性有以下几个取值：
- auto：默认值，元素会继承父元素的 align-items 属性。
- flex-start：将元素对齐到交叉轴的起点。
- flex-end：将元素对齐到交叉轴的终点。
- center：将元素在交叉轴上居中对齐。
- baseline：使元素的基线与其他元素的基线对齐。
- stretch：默认情况下，flex 元素会被拉伸以填满容器的交叉轴，此时元素的高度将自动增加以达到和容器一样的高度。使用 align-self: stretch 将元素拉伸以充满交叉轴。
align-self 的示例代码
以下是一个使用 align-self 的示例代码：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item" style="align-self: flex-end;">3</div> </div>
首先，我们需要定义一个带有三个子元素的容器元素。每个子元素都是一个 flex 元素，默认情况下子元素将在交叉轴上居中对齐。因为我们为第三个子元素设置了 align-self: flex-end，所以它会被对齐到交叉轴的终点，而不是居中。
在这个示例中，align-self 属性只应用于第三个子元素（使用了 inline-style），而第一和第二个子元素仍然使用容器元素的 align-items 属性（默认是居中对齐）。
align-self 的指导意义
使用 align-self 属性可以让我们更细粒度地控制 flex 元素的对齐方式，它能够解决需要在 flex 布局中对齐单个元素的需求。align-self 属性在响应式设计中尤其有用，因为它可以同时在不同的屏幕尺寸中使用，使得 flex 元素在所有显示设备上的对齐方式都保持一致。
在实际应用中，我们可以将 align-self 用于不同的 flex 元素，将它们对齐到不同的位置，从而创造出符合我们要求的布局效果。使用 align-self 和其它 Flexbox 属性一起，我们可以创建出高效、灵活且响应式的布局，以适应不同的设备和浏览器。
结论
CSS Flexbox 布局是一个非常强大和灵活的布局方式，align-self 属性是帮助我们控制 flex 元素在交叉轴上对齐的关键。在使用 align-self 时，我们需要注意它的取值和作用范围，以达到预期的布局效果。希望这篇文章能够帮助你更深入理解 CSS Flexbox 布局中的 align-self 属性，并且为你在实际应用中使用 Flexbox 提供一些有用的指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e812be884a3e30f27cb63