align-items用于控制flex子项在交叉轴的对齐方式，其值包括stretch（默认，拉伸填充）、flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、baseline（基线对齐），配合flex-direction决定主轴方向，实现垂直居中、等高布局等效果，常用于导航栏垂直居中或侧边栏横向对齐，需注意stretch在子项有固定尺寸时不生效，个别子项可用align-self覆盖。
在使用 CSS Flexbox 布局时，align-items 是一个非常关键的属性，它用于控制 flex 容器中所有子元素（flex 项目）在交叉轴（cross axis）上的对齐方式。理解这个属性有助于快速实现垂直居中、顶部对齐等常见布局需求。
什么是交叉轴？
Flexbox 是单向布局模型，分为主轴（main axis）和交叉轴（cross axis）：
- 主轴方向由 flex-direction 决定（可为 row、row-reverse、column、column-reverse）
- 交叉轴始终与主轴垂直。例如：
- 当
flex-direction: row时，主轴是水平的，交叉轴是垂直的（上下方向） - 当
flex-direction: column时，主轴是垂直的，交叉轴是水平的（左右方向）
- 当
- align-items 就是在这个交叉轴上起作用
align-items 的可选值及效果
以下是 align-items 支持的所有取值及其具体表现：
1. stretch（默认值）
立即学习“前端免费学习笔记（深入）”；
- 当子元素在交叉轴上没有设置尺寸（如 height 或 width）时，会自动拉伸以填满容器
- 常用于让多个列等高
- 示例：三个 div 在 row 方向下自动等高撑满父容器高度
2. flex-start
- 子元素在交叉轴的起点对齐
- 如果主轴是 row，则向上对齐；如果是 column，则向左对齐
3. flex-end
- 子元素在交叉轴的终点对齐
- 主轴为 row 时向下对齐；column 时向右对齐
4. center
- 子元素在交叉轴上居中对齐
- 最常用的垂直居中方案之一（配合 justify-content 可实现完全居中）
5. baseline
- 所有子元素按文本基线对齐
- 适用于包含文本的行内元素或表单项，能让文字底部对齐更自然
- 注意：只有当子元素有文本内容且未被其他对齐覆盖时才明显生效
实际应用示例
假设有一个横向排列的导航栏，希望其中的文字图标都垂直居中：
.container {
display: flex;
align-items: center; /* 所有子项在垂直方向居中 */
height: 60px;
}
又比如做一个侧边栏菜单，纵向排列（column），想让每个菜单项靠左对齐：
.sidebar {
display: flex;
flex-direction: column;
align-items: flex-start; /* 横向靠左对齐（此时交叉轴是水平的） */
}
注意事项
- align-items 作用于整个容器，影响所有子元素
- 若需单独控制某个子项，应使用 align-self 覆盖父容器设定
- 当子元素设置了固定尺寸（如 height），stretch 效果将失效
- 避免与旧版 Flexbox 语法混淆（如 box-align），现代浏览器统一使用 align-items
基本上就这些。掌握 align-items 能让你在处理 Flex 布局时更加得心应手，特别是面对垂直对齐这类传统 CSS 较难处理的问题时，显得尤为强大。不复杂但容易忽略细节。
