align-items用于容器统一设置子项在交叉轴的对齐方式，align-self可单独调整某子项以覆盖父级设置，二者结合实现灵活精准的垂直布局控制。
在使用 Flexbox 布局时，align-items 和 align-self 是控制交叉轴对齐的关键属性。合理结合它们，可以快速实现灵活且精准的布局控制。
align-items 统一设定容器内项目的对齐方式
该属性作用于 flex 容器，定义所有子项目在交叉轴（默认为垂直方向）上的对齐方式。
常用值包括：- flex-start：顶部对齐
- flex-end：底部对齐
- center：居中对齐
- stretch：拉伸填满容器（默认值）
- baseline：基线对齐
例如，让所有子元素在容器中垂直居中：
container {
display: flex;
align-items: center;
}
align-self 单独调整某个子项的对齐行为
该属性作用于 flex 子项，可覆盖 align-items 的设置，实现个别项目的独立对齐。
立即学习“前端免费学习笔记（深入）”；
典型应用场景：
- 一个列表中多数项目居中，但某一项需要靠上或靠下
- 表单项中标签与输入框的对齐微调
- 卡片布局中，仅某个图标需要顶部对齐
示例：容器整体居中，但第二个项目顶部对齐
.container {
display: flex;
align-items: center;
}
.item-2 {
align-self: flex-start;
}
组合使用提升布局灵活性
通过先用 align-items 设定统一规则，再用 align-self 处理例外情况，能减少冗余样式，提高可维护性。
实际技巧：- 优先设置容器的 align-items，保持整体一致性
- 只对需要特殊处理的子元素添加 align-self
- 避免在每个子项都写重复的对齐属性，提升代码简洁度
基本上就这些。掌握这两个属性的层级关系——容器设默认，子项可覆盖，就能高效控制垂直对齐，让布局更清晰可控。
