| 类名 | 样式 |
|---|---|
| .align-items-start | align-items: flex-start; |
| .align-items-end | align-items: flex-end; |
| .align-items-center | align-items: center; |
| .align-items-baseline | align-items: baseline; |
| .align-items-stretch | align-items: stretch; |
概览
在 flexbox 容器上使用 align-items 工具来改变 flex 项在交叉轴（y 轴为默认，x 轴如果 flex-direction: column）上的对齐方式。可从 start、end、center、baseline 或 stretch（浏览器默认）中选择。
基本用法
对齐
项目
开始
对齐
项目
结束
对齐
项目
居中
对齐
项目
基线
对齐
项目
拉伸
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
响应式
align-items也存在响应式变体。
.align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-stretch.sm:align-items-start.sm:align-items-end.sm:align-items-center.sm:align-items-baseline.sm:align-items-stretch.md:align-items-start.md:align-items-end.md:align-items-center.md:align-items-baseline.md:align-items-stretch.lg:align-items-start.lg:align-items-end.lg:align-items-center.lg:align-items-baseline.lg:align-items-stretch.xl:align-items-start.xl:align-items-end.xl:align-items-center.xl:align-items-baseline.xl:align-items-stretch.2xl:align-items-start.2xl:align-items-end.2xl:align-items-center.2xl:align-items-baseline.2xl:align-items-stretch
CSS
Sass 工具 API
对齐项目的工具类在我们的工具类 API 中声明，位于 scss/_utilities.scss。了解如何使用工具类 API。
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),