align-items用于控制flex容器子元素在交叉轴上的对齐方式，其取值包括flex-start、flex-end、center、baseline和stretch（默认值），需结合flex-direction判断主轴与交叉轴方向，常用于垂直居中、文本基线对齐等布局场景。
align-items 是 CSS Flexbox 布局中的一个关键属性，用于控制 flex 容器中子元素在交叉轴（cross axis）上的对齐方式。理解它需要先明确主轴和交叉轴的概念：主轴由 flex-direction 决定，而交叉轴则垂直于主轴。
常用 align-items 取值及效果
以下是align-items 的主要可选值及其作用：-
flex-start：子元素向交叉轴的起点对齐。例如，当
flex-direction: row时，元素顶部对齐；若为column，则是左侧对齐。 - flex-end：子元素向交叉轴的终点对齐。对应行布局时底部对齐，列布局时右侧对齐。
- center：子元素在交叉轴上居中对齐。这是最常用的垂直居中方法之一。
- baseline：子元素按文本基线对齐。适合包含不同字号或内联元素的场景，文字看起来更整齐。
- stretch（默认值）：子元素拉伸以填满容器（前提是未设置交叉轴方向的尺寸，如 height 或 width）。
实际使用示例
假设我们有一个水平排列的 flex 容器，想让所有子项垂直居中：
.container {
display: flex;
flex-direction: row;
align-items: center; /* 垂直居中 */
}
如果改为 flex-direction: column，那么 align-items: center 就会让子元素在水平方向居中（即沿横轴居中），因为此时交叉轴是水平的。
与 align-content 的区别
注意不要混淆align-items 和 align-content。前者控制单行内项目在交叉轴上的对齐，后者用于多行 flex 容器，决定各行之间的分布方式。当只有一行时，align-content 不起作用。常见应用场景
- 按钮组或导航栏中图标与文字垂直对齐。
- 卡片布局中内容区域的统一垂直定位。
- 实现整体垂直居中布局（配合
justify-content使用更佳）。
基本上就这些。掌握 align-items 能快速解决大多数交叉轴对齐问题，关键是根据 flex-direction 判断当前交叉轴的方向。
