align-items用于设置flex容器子元素在交叉轴上的对齐方式，其常用值包括flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、stretch（拉伸填满，默认值）和baseline（基线对齐），该属性需应用于display为flex或inline-flex的容器，影响所有直接子元素，常用于实现垂直居中等布局效果。
align-items 是 CSS Flexbox 布局中的一个关键属性，用于控制弹性容器（flex container）中所有子元素在交叉轴（cross axis）上的对齐方式，也就是通常所说的“垂直对齐”。当使用 Flexbox 创建布局时，align-items 能够非常方便地实现单元格内容的垂直居中、顶部对齐、底部对齐等效果。
基本语法
align-items: flex-start | flex-end | center | baseline | stretch;该属性设置在弹性容器上，影响所有直接子元素的垂直对齐行为。下面介绍各个值的具体作用和使用场景。
常用取值说明
flex-start：子元素与交叉轴起点对齐，即顶部对齐（在默认的 row 方向中）。
flex-end：子元素与交叉轴终点对齐，即底部对齐。
立即学习“前端免费学习笔记（深入）”；
center：子元素在交叉轴上居中对齐，常用于垂直居中内容。
stretch：默认值。子元素被拉伸以填满容器（前提是子元素没有设置固定高度）。
baseline：子元素按基线对齐，适合文本类内容对齐。
实际应用示例
假设有一个 flex 容器，包含多个单元格（子元素），我们想让它们统一垂直居中：
.container { display: flex; align-items: center; / 垂直居中 / height: 200px; / 需要设定容器高度才能看出效果 / }
如果希望所有单元格顶部对齐：
.container { display: flex; align-items: flex-start; height: 200px; }若想让内容撑满整个容器高度（比如表单行）：
.container { display: flex; align-items: stretch; } .item { flex: 1; }注意事项
方向会影响交叉轴。默认 flex-direction: row 时，交叉轴是垂直的，align-items 控制垂直对齐；若改为 row-reverse 或 column，需注意主轴和交叉轴的变化。
只有直接子元素受 align-items 影响。若需要单独调整某个子项，应使用 align-self 属性覆盖。
容器本身必须是 display: flex 或 display: inline-flex，否则 align-items 不生效。
基本上就这些。掌握 align-items 的五个取值，就能灵活控制 flex 单元格的垂直对齐方式，实现常见的布局需求。
