CSS Flexbox（弹性盒子布局）是一个强大的 CSS 布局工具，用于在网页的父元素和子元素之间创建弹性的、自适应的布局。CSS Flexbox 可以让我们轻松地控制元素在横轴和纵轴上的对齐方式，然而，有时候我们需要特殊地控制某个单独的子元素的对齐方式，这时候，我们可以使用 align-self 属性来完成。
align-self 属性
align-self 属性允许我们在子元素上重写父元素定义的 align-items 属性，这样我们可以控制某个单独的子元素在纵轴上的对齐方式。align-self 属性可以被应用于任何 Flexbox 的子元素，并可以采用以下值：
- auto：使用父元素的 align-items 值。
- flex-start：在纵轴上对齐子元素的顶部。
- flex-end：在纵轴上对齐子元素的底部。
- center：在纵轴上居中对齐子元素。
- baseline：在纵轴上按照元素的基线对齐元素。
- stretch：使子元素沿着纵轴方向填充整个父元素的空间。
使用 align-self 属性的示例
让我们通过一个实际的例子来了解如何使用 align-self 属性。我们假设有一个 Flexbox 布局的父元素 div，它包含了两个子元素 span1 和 span2。现在，我们想要让 span1 在纵轴上居中对齐，而让 span2 在纵轴上靠下对齐。
<div class="parent"> <span class="span1">This is span1</span> <span class="span2">This is span2</span> </div>
我们在父元素 .parent 上定义了 display: flex 来使其成为一个 Flexbox 布局，并设置了 align-items: center 使子元素在纵轴上居中对齐。现在，我们需要通过 align-self 属性对子元素 span1 和 span2 进行单独的对齐方式设置。
-- -------------------- ---- ------- ------- - -------- ----- --------------- ------- ---------------- ------- ------------ ------- ------- ------ ------- --- ----- ------ - ------ - ----------- ------- ---------- ----- - ------ - ----------- --------- ---------- ----- -
我们在子元素 .span1 上设置了 align-self: center，这样它就在纵轴上居中对齐。在子元素 .span2 上，我们设置了 align-self: flex-end，这样它就在纵轴上靠下对齐。这个演示的结果如下图所示：
在这个例子中，我们使用了 align-self 属性来控制单个子元素的对齐方式。无论 Flexbox 布局是如何定义的，我们都可以通过 align-self 属性来单独地控制每个子元素在纵轴上的对齐方式。
总结
CSS Flexbox 是一种非常强大的布局工具，可以帮助我们快速地创建灵活、自适应的网页布局。在 Flexbox 布局中，我们使用 align-items 属性来控制所有子元素在纵轴上的对齐方式。但是，有时候我们需要特别控制某个子元素的对齐方式，这时候我们可以使用 align-self 属性。align-self 属性允许我们在子元素上重写父元素定义的 align-items 属性，从而可以单独地控制每个子元素在纵轴上的对齐方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd578095b1f8cacdcd183e
