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 设置，只影响当前这个子元素。

立即学习“前端免费学习笔记（深入）”；

稿定AI社区

在线AI创意灵感社区

60

查看详情

它的可选值和 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; —— 这个子项会靠上对齐，其他不变

基本上就这些。理解清楚谁管整体、谁管个体，就能正确使用这两个属性了。

以上就是