css align-items控制交叉轴对齐方法

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 判断当前交叉轴的方向。