align-self

align-self

用于控制单个 flex 或 grid 项在其容器的交叉轴上如何定位的工具类。

Class Styles

self-auto

align-self: auto;

self-start

align-self: flex-start;

self-end

align-self: flex-end;

self-center

align-self: center;

self-stretch

align-self: stretch;

self-baseline

align-self: baseline;

示例

使用 self-auto 根据容器的 align-items 属性的值对项进行对齐：

<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-auto ...">02</div>
  <div>03</div>
</div>

使用 self-start 将项对齐到容器交叉轴的开始位置，尽管容器的 align-items 值如何：

<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-start ...">02</div>
  <div>03</div>
</div>

使用 self-center 将项沿容器交叉轴的中心对齐，尽管容器的 align-items 值如何：

<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-center ...">02</div>
  <div>03</div>
</div>

使用 self-end 将项对齐到容器交叉轴的结束位置，尽管容器的 align-items 值如何：

<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-end ...">02</div>
  <div>03</div>
</div>

使用 self-stretch 将项拉伸以填充容器的交叉轴，尽管容器的 align-items 值如何：

<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-stretch ...">02</div>
  <div>03</div>
</div>

Prefix an align-self utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="self-auto md:self-end ...">
  <!-- ... -->
</div>

Learn more about using variants in the variants documentation.