flex-direction 唯一决定主轴方向，justify-content 仅沿主轴对齐；设为 column 后 justify-content 控制上下对齐，而非左右；固定宽高需配合 flex-basis 或媒体查询适配方向切换。
flex-direction 控制主轴方向，不是 justify-content
很多人改了 justify-content 发现没用，是因为它只负责“沿主轴对齐”，不决定主轴朝哪走。真正切换水平/垂直主轴的是 flex-direction，它一设就生效，且直接影响所有其他弹性属性的逻辑方向。
常见错误现象：justify-content: center 在子元素横排时居中有效，但改成竖排后内容却贴顶——其实是忘了同步检查 flex-direction 是否已设为 column。
-
flex-direction: row（默认）：主轴水平向右，justify-content控制左右对齐 -
flex-direction: column：主轴垂直向下，justify-content控制上下对齐 -
row-reverse和column-reverse会翻转主轴起点，影响justify-content的“起点”参照
flex-wrap 不影响主轴方向，但会影响换行后的次轴理解
flex-wrap 只决定子项是否换行，不改变主轴本身。但它会让初学者误判：比如设了 flex-direction: row; flex-wrap: wrap，多行显示后以为“行”是主轴，其实主轴仍是水平方向，只是换行后每行独立对齐。
使用场景：做响应式导航栏，横向排列超宽时换行，此时仍需靠 justify-content 控制每行内部对齐，而 align-content 才控制行与行之间的间距。
立即学习“前端免费学习笔记（深入）”；
- 主轴方向由
flex-direction唯一决定，flex-wrap完全不参与 - 换行后，
align-content生效；不换行时，它无效 - 移动端常用
flex-direction: column+flex-wrap: wrap做瀑布流布局，但注意主轴已是垂直方向
写死 width/height 时，flex-direction 切换可能让布局崩掉
当子元素设置了固定 width 或 height，再切 flex-direction 很容易出问题。比如原为 row，子项设了 width: 200px；切到 column 后，这个 width 仍作用于宽度，但主轴已变垂直，结果子项被强行压扁或溢出。
性能影响：浏览器不需要重排整个容器，但会触发子项尺寸重算，频繁切换方向+固定尺寸可能引发 layout thrashing。
- 优先用
flex-basis替代width/height，它会随主轴自动映射（row下对应宽度，column下对应高度） - 如果必须用固定尺寸，配合媒体查询或 JS 检测方向变更后手动重设
- 避免在动画中动态切换
flex-direction，CSS 不支持该属性的过渡动画
IE10–11 对 flex-direction 的语法支持有坑
IE10–11 要求带 -ms- 前缀，且只认 -ms-flex-direction，不支持 row-reverse 和 column-reverse。写了也无效，还会导致整条声明被忽略。
兼容性影响：若项目需支持 IE，不能依赖反向主轴，得用其他方式模拟（比如 transform: scaleY(-1) 翻转容器，但会翻转文字和交互）。
- 必须写两遍：
flex-direction: column;和-ms-flex-direction: column; - IE 下
flex-direction: column-reverse会被直接丢弃，降级为column - 测试时务必在真实 IE 环境下验证，Edge Legacy（IE18）也继承这套限制
主轴方向看着简单，但一旦混入固定尺寸、换行、老浏览器或动画，就很容易在某个环节断链。最常被忽略的是：justify-content 和 align-items 的作用完全取决于 flex-direction 当前值，而不是你“以为”的方向。
