align-items 交叉轴对齐属性

最后更新：2026-09-13

align-items align-items 交叉轴对齐属性

align-items 属性用于设置弹性容器内所有项目在交叉轴上的对齐方式，控制项目在垂直于主轴方向上的位置。默认值为 stretch，项目会被拉伸以填满容器在交叉轴方向的高度。该属性常用于实现垂直居中、顶部对齐、底部对齐和基线对齐等常见布局效果。

align-items: normal | stretch | center | start | end | self-start | self-end | flex-start | flex-end | baseline;

值	类型	描述
`normal \| stretch \| flex-start \| flex-end \| center \| baseline`	关键字	交叉轴对齐方式

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
align-items	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
所有主流浏览器均支持

提示： 配合 justify-content: center 和 align-items: center 可以快速实现弹性项目的水平垂直居中，这是最常见的居中方案之一。

注意： baseline 值会让所有项目按文字基线对齐，适合文字大小不同的场景。但如果某个项目没有文字内容，其底部会被当作基线，可能导致对齐效果不符合预期。

Qalign-items 和 align-self 有什么区别？

Aalign-items 作用于弹性容器，统一设置所有子项在交叉轴上的对齐；align-self 作用于单个弹性项目，覆盖容器的默认值。align-self 优先级更高。同理 justify-items 与 justify-self 也是容器设置与单项覆盖的关系。

Q为什么 align-items: center 没有垂直居中？

Aalign-items 作用在交叉轴上。若容器没有明确高度（高度被内容撑开），交叉轴方向没有剩余空间，居中效果就看不出来。给容器设置明确高度即可解决，例如 height: 200px。若想同时在主轴居中，再配合 justify-content: center。

Qalign-items: stretch 为什么不生效？

Astretch 只在子项没有设置明确交叉轴尺寸时生效。例如主轴为 row 时，若子项设置了 height，stretch 会被覆盖，子项按自身高度显示；若容器在交叉轴方向没有确定尺寸，拉伸也无从谈起。想让 stretch 生效，保持子项交叉轴尺寸为 auto，并让容器在该方向有确定高度。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。