选 row 还是 column 取决于内容自然流向：横排用 row（主轴水平），竖排用 column（主轴垂直）；主轴方向决定 justify-content 和 align-items 的作用轴，错误设置会导致对齐失效。
flex-direction 值选 row 还是 column？看主轴起点和内容流向
别凭感觉选 row 或 column，先确认容器里内容的自然阅读/操作顺序。横排表单、导航栏、时间线——主轴往右走，用 row；竖排菜单、消息列表、设置项组——主轴往下走，用 column。反着设会导致 justify-content 和 align-items 行为完全对不上预期。
常见错误现象：justify-content: center 没反应，或元素堆在左上角不动——大概率是主轴方向和你想象的不一致，导致对齐属性作用在了“看不见”的轴上。
-
row：主轴水平，justify-content控制左右，align-items控制上下 -
column：主轴垂直，justify-content控制上下，align-items控制左右 - 值还有
row-reverse和column-reverse，它们只翻转主轴方向，不影响交叉轴对齐逻辑
flex-direction: row-reverse 为什么会让 justify-content 失效？
不是失效，是你没意识到 justify-content 始终按主轴正方向对齐。设成 row-reverse 后，主轴起点从左变成右，justify-content: flex-start 就真跑到右边去了——看着像“没生效”，其实是它严格按新起点执行了。
使用场景：需要右对齐但又不想用 margin-left: auto 的老式写法；或者做 RTL（从右向左）语言适配时，配合 dir="rtl" 一起用更稳妥。
立即学习“前端免费学习笔记（深入）”；
- 单独用
row-reverse+justify-content: flex-end，结果等同于默认row+justify-content: flex-start - 想保持视觉上“左对齐”但用
row-reverse，得改用justify-content: flex-end - 不要依赖
row-reverse实现“右对齐布局”，优先考虑text-align或margin-left: auto更直观
flex-direction 影响 flex-wrap 和 order 的行为逻辑
flex-wrap 的换行方向、order 的排序依据，都绑定在当前 flex-direction 定义的主轴上。主轴一变，整个排列逻辑就重算一遍。
性能影响很小，但兼容性要注意：IE10–11 对 row-reverse 和 column-reverse 支持不稳定，order 在 IE 中只支持整数，负值可能被忽略。
-
flex-wrap: wrap在row下换行是向下，在column下换行是向右 -
order值小的排在主轴前面，跟 DOM 顺序无关——所以order: -1在row-reverse中会出现在最右边，不是最左边 - 如果同时用
order和row-reverse，调试时建议先关掉reverse看原始顺序，再开回来验证
移动端适配中 flex-direction 切换的坑
用媒体查询切换 flex-direction 是常见响应式手法，但容易忽略子元素尺寸是否适配新主轴。比如横屏 row 下子项设了 width: 200px，切到竖屏 column 后，这个宽度还在，但可能撑爆容器或留大片空白。
更隐蔽的问题：某些 CSS 动画、transform 或第三方库（如 Swiper）内部依赖主轴方向判断滚动/拖拽方向，硬切 flex-direction 可能导致交互错乱。
- 切换前检查子项的
width/height是否需同步调整，例如flex-direction: column时优先用height控制单个项高度 - 避免在动画进行中动态改
flex-direction，浏览器可能跳过重排直接渲染错位 - 用
@container查询替代部分媒体查询更可靠，但目前支持度有限，flex-direction切换仍需手动控制
