自身对齐

概览

在弹性盒子项目上使用 align-self 工具来单独更改它们在交叉轴上的对齐方式（默认是 y 轴，如果使用 flex-direction: column 则为 x 轴）。可从与 align-items 相同的选项中选择：start、end、center、baseline 或 stretch（浏览器默认）。

基本用法

          <div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
        

响应式

align-self也存在响应式变体。

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch
• .sm:align-self-start
• .sm:align-self-end
• .sm:align-self-center
• .sm:align-self-baseline
• .sm:align-self-stretch
• .md:align-self-start
• .md:align-self-end
• .md:align-self-center
• .md:align-self-baseline
• .md:align-self-stretch
• .lg:align-self-start
• .lg:align-self-end
• .lg:align-self-center
• .lg:align-self-baseline
• .lg:align-self-stretch
• .xl:align-self-start
• .xl:align-self-end
• .xl:align-self-center
• .xl:align-self-baseline
• .xl:align-self-stretch
• .2xl:align-self-start
• .2xl:align-self-end
• .2xl:align-self-center
• .2xl:align-self-baseline
• .2xl:align-self-stretch

CSS

Sass 工具 API

对齐自我工具类在我们的工具类 API 中声明，位于 scss/_utilities.scss。了解如何使用工具类 API。

"align-self": (
  responsive: true,
  property: align-self,
  values: (
    auto: auto,
    start: flex-start,
    end: flex-end,
    center: center,
    baseline: baseline,
    stretch: stretch,
  )
),