CSS align-self 属性

align-self 是 CSS3 中的一种属性，用于控制 flexbox 中单个元素在该行上的对齐方式。它可以设置在 flex 容器中的任意一个元素上。

语法

selector {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

• auto（默认值）：元素沿着包含它的轴线垂直和平行的方向上自动对齐。
• flex-start：元素向轴线起始位置对齐。
• flex-end：元素向轴线结束位置对齐。
• center：元素在轴线的中点位置对齐。
• baseline：元素在它的基线上对齐。如果父元素没有基线，那么该元素会沿着父元素的假设基线对齐。
• stretch：元素沿着轴线的整个高度进行拉伸，以填充父容器。

示例

以下是一个使用 align-self 的简单示例：

<div class="container">
  <div class="item1">Item1</div>
  <div class="item2">Item2</div>
  <div class="item3">Item3</div>
</div>

.container {
  display: flex;
  align-items: center;
  height: 200px;
}

.item2 {
  align-self: flex-end;
}

这个例子中，容器采用了 flexbox 布局，并使用 align-items 属性将它的项目放置在垂直中心。然后，我们在第二个项目上使用了 align-self: flex-end，将它向轴线结束位置对齐。这样，该项就会紧贴容器的底部，而不是在中心位置。

注意事项

• align-self 只会影响flex容器中的单个项目。如果您需要更改容器中所有项目的对齐方式，请使用 align-items 属性。
• 如果您没有定义 align-items 属性，那么元素的 align-self 设置将没有影响。
• 更改 align-self 属性通常需要对 display 和 flex-direction 属性进行适当的配置。
• 当您在包含元素中设置了 align-items 属性时，任何元素的 align-self 属性都可以用来重写该值，从而以不同的方式对齐单个项目。