1. Flexbox & Grid
  2. align-self

Flexbox & Grid

align-self

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

样式
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 属性的值对齐项目

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

开始

使用 self-start 将项目对齐到容器交叉轴的起始位置,而忽略容器的 align-items

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

居中

使用 self-center 将项目沿容器交叉轴的中心对齐,而忽略容器的 align-items

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

结束

使用 self-end 将项目对齐到容器交叉轴的末尾,而忽略容器的 align-items

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

拉伸

使用 self-stretch 拉伸项目以填充容器的交叉轴,而忽略容器的 align-items

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

响应式设计

前缀一个 align-self 实用工具 使用诸如 md: 之类的断点变体,以便仅在以下情况下应用该实用工具中等 屏幕尺寸及以上

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

变体文档中了解有关使用变体的更多信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策