align-self与align-items区别详解

文章不知道大家是否熟悉？今天我将给大家介绍《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 设置，只影响当前这个子元素。

• flex-start、flex-end、center、stretch、baseline

当某个子项设置了 align-self，它就会忽略容器的 align-items 规则，按自己的设定对齐。

两者关系与优先级

align-self 的优先级高于 align-items。相当于容器设了一个“默认对齐”，而子项可以用 align-self “自己决定”。

举个例子：

• 容器设置 align-items: center; —— 所有子项都垂直居中
• 其中一个子项设置 align-self: flex-start; —— 这个子项会靠上对齐，其他不变

本篇关于《align-self与align-items区别详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！