CSS Flexbox中行是否存在独立主轴交叉轴？相关属性作用验证

你的认知是完全正确的，下面补充相关规则的细节，帮你理清容易混淆的边界：

• 给元素设置display: flex后会创建flex container，其直接子元素自动成为flex items，这部分基础认知没有问题。你之前认为只有容器本身存在主轴、交叉轴，是很多人初学Flexbox时都会遇到的认知误区。
• 当容器设置flex-wrap: wrap/wrap-reverse产生多行布局时，容器内部会生成独立的flex行结构，每一行都拥有独立的交叉轴对齐逻辑，两个交叉轴相关对齐属性的作用域有明确区分：
  • align-items作用于单行内部：控制同一行内的flex items在该行交叉轴上的对齐方式，无论容器是单行还是多行布局，这个属性都会正常生效。
  • align-content作用于容器内的所有行集合：控制多行整体在容器交叉轴上的分布规则，这个属性仅在实际存在多行的场景下生效，如果容器是不换行的单行布局，设置这个属性不会产生任何效果。
• 你提到的align-content: space-between的表现完全符合W3C规范：多行场景下，该值会将交叉轴方向的剩余空间全部分配在行与行之间，第一行紧贴交叉轴起始位置，最后一行紧贴交叉轴结束位置，中间各行均匀分布，相邻行的间距完全相等。

补充一个易混知识点：如果需要单独调整某一个flex item的交叉轴对齐方式，不需要修改容器上的align-items规则，给目标item设置align-self属性即可，该属性优先级高于容器的align-items设置，仅对当前元素生效。

内容的提问来源于stack exchange，提问作者AngryJohn