align-items是Flex容器中控制子项在交叉轴对齐的关键属性，取值包括stretch（默认，拉伸填满）、flex-start（起点对齐）、flex-end（终点对齐）、center（居中）和baseline（基线对齐），其作用方向由flex-direction决定：row时控制垂直对齐，column时控制水平对齐。
align-items 是 Flex 布局中控制所有子项在交叉轴（cross axis）上对齐方式的关键属性，必须作用于 flex 容器（即设置了 display: flex 或 display: inline-flex 的父元素）。
理解交叉轴方向
交叉轴始终垂直于主轴（main axis）：
- 当 flex-direction: row（默认）时，主轴水平，交叉轴就是垂直方向（Y 轴），align-items 控制上下对齐；
- 当 flex-direction: column 时，主轴垂直，交叉轴变为水平方向（X 轴），align-items 控制左右对齐。
常用 align-items 取值及效果
这些值作用于容器，影响所有直接子元素（flex items）：
- stretch（默认值）：子项在交叉轴方向拉伸，填满容器高度（或宽度），前提是子项未设置固定尺寸（如 height/width）；
- flex-start：子项向交叉轴起点对齐（例如 row 时顶部对齐，column 时左侧对齐）；
- flex-end：子项向交叉轴终点对齐（例如 row 时底部对齐，column 时右侧对齐）；
- center：子项在交叉轴居中（最常用，实现垂直居中非常方便）；
- baseline：子项按第一行文字基线对齐，适合含文本的混合高度子项。
注意与单个子项对齐的区别
align-items 是“全局”控制，若需单独调整某个子项在交叉轴的位置，应使用 align-self。它可覆盖容器的 align-items 设置，取值相同，且只作用于该子项本身。
实际用法示例
让一个卡片区域内容垂直+水平居中：
section {
display: flex;
flex-direction: row; /* 主轴水平 */
align-items: center; /* 交叉轴（垂直）居中 */
justify-content: center; /* 主轴（水平）居中 */
height: 300px;
}此时，section 内所有直接子元素会在容器内垂直居中、水平居中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
