Skip to main content

align-self 属性

Docs

align-self - CSS：层叠样式表 | MDN (mozilla.org)

CSS 属性 align-self 会对齐当前 grid 或 flex 行中的元素，并覆盖 flex container 已有的 align-items 的值。

在 Flexbox 中，会按照 cross axis（当前 flex 元素排列方向的垂直方向）进行排列。

  • auto（默认值）：遵从 flex container 的 align-items 设置
  • stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

align-self 属性用于控制弹性项在交叉轴上的对齐方式，可以覆盖弹性容器的 align-items 属性。

align-self 属性可以应用于每个弹性项上，它的取值和 align-items 属性相同，包括 flex-start、flex-end、center、baseline 和 stretch。

如果在弹性项上设置了 align-self 属性，它将覆盖弹性容器的 align-items 属性，否则弹性容器的 align-items 属性将决定弹性项在交叉轴上的对齐方式。

需要注意的是，如果弹性项未设置 align-self 属性，则弹性容器的 align-items 属性将应用于所有弹性项。

Details