align-items用于设置flex容器内子元素在交叉轴上的对齐方式，其取值包括flex-start、flex-end、center、baseline和stretch（默认值），作用方向受flex-direction影响，常用于实现垂直或水平居中布局，需配合display:flex使用，且个别项目可通过align-self覆盖。
在 CSS 中，align-items 是 Flexbox 布局中的一个关键属性，用于控制 flex 容器中所有子元素（flex 项目）在交叉轴（cross axis）上的对齐方式。要理解它如何工作，先明确主轴和交叉轴的概念：主轴由 flex-direction 决定，而交叉轴则垂直于主轴。
基本语法
align-items: flex-start | flex-end | center | baseline | stretch;该属性应用于flex 容器，而不是单独的子元素。设置后会影响容器内所有项目的交叉轴对齐行为。
常见取值及效果
- flex-start：项目在交叉轴的起点对齐。
- flex-end：项目在交叉轴的终点对齐。
- center：项目在交叉轴上居中对齐。
- baseline：项目在交叉轴上按基线对齐，常用于文本类内容。
- stretch（默认值）：项目在交叉轴方向拉伸以填满容器（前提是项目未设置高度）。
实际应用示例
假设你有一个垂直居中需求：
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 300px;
}
如果 flex-direction: row（默认），交叉轴是垂直方向，align-items: center 就会让子元素垂直居中。如果改为 flex-direction: column，交叉轴变成水平方向，此时 align-items 控制的就是水平对齐。
立即学习“前端免费学习笔记（深入）”；
注意事项
使用 align-items 时注意以下几点：
- 只有当容器设置了 display: flex 或 display: inline-flex 时，该属性才生效。
- 若子元素设置了固定高度（或宽度，取决于主轴方向），stretch 效果将不会起作用。
- 个别子元素可通过 align-self 覆盖 align-items 的设置。
基本上就这些。掌握 align-items 能帮你快速实现常见的垂直或横向对齐布局，关键是理解交叉轴的方向受 flex-direction 影响。
