css align-self与align-items区别
align-items 设置容器内所有子项在交叉轴的对齐方式，align-self 允许单个子项覆盖该设置；后者优先级更高，实现个体独立对齐。
align-self 和 align-items 都是 CSS Flexbox 布局中用于控制元素在交叉轴（cross axis）上对齐方式的属性，但它们的作用范围和优先级不同。
align-items：容器级对齐设置
这个属性写在flex 容器上，用来统一设置所有子元素在交叉轴上的对齐方式。
常见取值包括：- flex-start：顶部对齐（垂直方向起始位置）
- flex-end：底部对齐
- center：居中对齐
- stretch：拉伸填满容器（默认值）
- baseline：基线对齐
设置了 align-items 后，所有子项都会遵循这个规则，除非个
别子项有特别设置。
align-self：单个子项的独立对齐
这个属性写在flex 子项上，用于覆盖容器的 align-items 设置，只影响当前这个子元素。
它的可选值和 align-items 基本一致：- flex-start、flex-end、center、stretch、baseline
当某个子项设置了 align-self，它就会忽略容器的 align-items 规则，按自己的设定对齐。
两者关系与优先级
align-self 的优先级高于 align-items。相当于容器设了一个“默认对齐”，而子项可以用 align-self “自己决定”。
举个例子：
- 容器设置
align-items: center;—— 所有子项都垂直居中 - 其中一个子项设置
align-self: flex-start;—— 这个子项会靠上对齐，其他不变
