本文探讨了CSS中align-items和align-content属性的区别。align-items用于设置flex子项在交叉轴上的对齐方式，对每一个子项生效；而align-content仅在多行flex容器中有作用，调整子项整体在交叉轴的对齐，适用于有多余空间的情况。了解两者差异有助于更好地控制Flex布局。
说明：justfiy-content属性可应用于所有的flex容器，它的作用是设置flex子项（flex items）在主轴（默认是水平方向）上的对齐方式。不同取值的效果如下所示
而我们讨论的是：align-items属性可以应用于所有的flex容器，它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式。不同取值的效果如下所示：
而 align-content 只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐。不同取值的效果如下所示：
总结： 1. align-items 属性是针对单独的每一个flex子项起作用，它的基本单位是每一个子项，在所有情况下都有效果。
2. align-content属性是将flex子项作为一个整体起作用，它的基本单位是行，只在两种情况下有效果：①子项多行且flex容器高度有多余空间时 ②子项多行，flex容器高度固定且设置了flex-wrap:wrap.即允许子项换行的情况下
tip： 更多详情细节请去观看https://blog.csdn.net/cc18868876837/article/details/88138057
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
