align-items用于统一设置容器内所有子项在交叉轴上的对齐方式，而align-self可单独调整某个子项的对齐，且优先级更高，能覆盖align-items的设置。
在使用 Flexbox 布局时，align-items 和 align-self 都用于控制 Flex 容器中项目在交叉轴（cross axis）上的对齐方式，但它们的作用范围和优先级不同。理解两者的区别，有助于更灵活地实现布局控制。
align-items：统一设置所有子项的对齐方式
align-items 是应用于Flex 容器的属性，用来定义所有子元素在交叉轴上的默认对齐方式。它会影响容器内的每一个直接子项。
常见取值包括：
- flex-start：项目向交叉轴起点对齐
- flex-end：项目向交叉轴终点对齐
- center：项目在交叉轴上居中对齐
- baseline：项目按基线对齐
- stretch（默认值）：项目拉伸以填满容器（前提是没有设置高度）
例如：
.container {
display: flex;
align-items: center; /* 所有子项在交叉轴上居中 */
}
这样，容器内所有子元素都会垂直居中（假设主轴为水平方向）。
align-self：单独控制某个子项的对齐方式
align-self 是应用于Flex 子项的属性，允许单个项目覆盖 align-items 的设置，实现个性化的对齐效果。
它的可选值与 align-items 完全相同，如 flex-start、center、stretch 等。
例如：
.item1 {
align-self: flex-start; /* 单独让这个项目顶部对齐 */
}
即使容器设置了 align-items: center，.item1 仍会按照自己的 align-self 设置进行顶部对齐。
优先级关系：align-self 覆盖 align-items
align-self 的优先级高于 align-items。也就是说，当一个子项设置了 align-self，它将忽略容器的 align-items 规则，采用自己的对齐方式。
这类似于 CSS 中“具体优于一般”的原则 —— 容器设定的是通用规则，而子项可以自行决定是否打破这个规则。
实际应用场景举例
假设有一个导航栏，大部分菜单项希望垂直居中，但其中一个“通知图标”希望与顶部对齐：
.nav {
display: flex;
align-items: center; /* 默认都居中 */
}
<p>.badge {
align-self: flex-start; /<em> 特殊处理，靠上对齐 </em>/
}</p>这样就能在保持整体一致的同时，灵活调整个别元素的位置。
基本上就这些。掌握 align-items 和 align-self 的区别，能让你在 Flexbox 布局中更加得心应手。前者统一对齐，后者个别调整，配合使用效果最佳。
