17370845950

Flexbox 布局需厘清主轴与交叉轴：flex-direction 定义主轴方向，justify-content 沿主轴分布子项，align-items 在交叉轴对齐所有子项；注意容器尺寸、子项 flex 属性及 wrap 设置。

初学 CSS 弹性盒子（Flexbox）时，很多人卡在几个基础属性的理解和组合上。核心问题不是代码写不对，而是对 flex-direction、justify-content 和 align-items 的作用范围、参照系和默认行为不够清晰。下面直击最常踩的坑。

flex-direction 决定主轴方向，但新手常误以为它只控制“左右”

它定义的是弹性容器的主轴（main axis），而主轴方向直接决定 justify-content 的生效方向。比如：

• flex-direction: row（默认）→ 主轴水平向右，justify-content 控制元素在水平方向的分布
• flex-direction: column → 主轴垂直向下，justify-content 就变成控制垂直方向的分布了
• 容易混淆的是：align-items 始终作用于交叉轴（cross axis），所以当主轴是 column 时，交叉轴就是水平方向，align-items: center 就会让元素水平居中

justify-content 只作用于主轴，且不控制单个子项的位置

它调节的是所有弹性子项在主轴上的整体分布方式，不是让某个子项“靠右”或“居中”的定位工具。常见误解：

• 写了 justify-content: center 却发现没效果？先检查父容器是否设了 display: flex，再确认子项没有设置 margin: auto 或固定宽度撑满容器
• 想让最后一个子项右对齐？justify-content 无法单独操作某一项；需要用 margin-left: auto 推开前面的项，这是 Flexbox 的实用技巧
• space-between 要求至少两个子项，只有一个时无效；space-around 和 space-evenly 的间距逻辑也不同，建议动手试一遍对比

align-items 默认拉伸子项，但新手常忽略它对高度的影响

默认值是 stretch，会让子项在交叉轴方向填满容器高度（除非子项设置了固定高度或 min-height）。这导致很多“文字没垂直居中”的困惑：

• 文字容器没设高度，又用了 align-items: center，但文字看起来还是偏上？因为文字本身有行高和基线，默认对齐方式不是视觉居中，可加 display: flex; align-items: center; 到文字容器内部再处理
• 想让子项按自身内容高度显示，就设 align-items: flex-start 或 flex-end
• 注意：align-items 是容器属性，影响所有子项；如需单独控制某个子项，用 align-self

别忘了容器尺寸和子项 flex 属性才是布局稳定的关键

光调 justify-content 和 align-items 不够。真实布局中经常遇到子项溢出、换行、收缩异常：

• 父容器没设宽高，尤其在 flex-direction: column 下，高度可能塌陷，导致 align-items: center 看不出效果——记得给容器设 min-height 或明确高度
• 子项默认会收缩（flex-shrink: 1），内容多时会被压缩；不想被压扁？设 flex-shrink: 0 或用 flex: none
• 一行放不下时默认不换行，要换行得加 flex-wrap: wrap，这时 justify-content 仍作用于每一行，而非全部子项