css Flexbox对齐方式align-items详解

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 较难处理的问题时，显得尤为强大。不复杂但容易忽略细节。