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仍作用于每一行，而非全部子项
