Flexbox & Grid
用于控制单个 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
属性的值对齐项目
<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>
前缀一个 align-self
实用工具 使用诸如 md:
之类的断点变体,以便仅在以下情况下应用该实用工具中等 屏幕尺寸及以上
<div class="self-auto md:self-end ..."> <!-- ... --></div>
在变体文档中了解有关使用变体的更多信息。