<p>flex-direction 控制主轴方向而非排列顺序，决定 justify-content 和 align-items 的作用轴；row/column 切换主轴方向，-reverse 翻转视觉顺序但不改变 DOM 顺序，影响可访问性和位置计算；换行由 flex-wrap 控制，IE10–11 需 -ms- 前缀且不支持 -reverse。</p>
flex-direction 控制主轴方向，不是“排列顺序”而是“布局流向”
很多人调 flex-direction 是为了“让项目从上往下排”，结果加了 flex-direction: column 却发现项目没动——其实它不改变单个项目的位置，只切换主轴是水平还是垂直。主轴方向变了，justify-content 和 align-items 的作用轴也会跟着变。
-
row（默认）：主轴水平向右，justify-content控制左右对齐 -
column：主轴垂直向下，justify-content控制上下对齐 -
row-reverse和column-reverse会翻转主轴起点，影响项目顺序和对齐基准点
reverse 类值会翻转项目渲染顺序，但不改变 DOM 顺序
用 row-reverse 后，视觉上最右边的项目变成第一个，但它在 HTML 中仍是第一个子元素。这对可访问性（如屏幕阅读器）和键盘 tab 顺序有实际影响——用户 Tab 时仍按 DOM 顺序走，但看到的是反的。
- 如果依赖语义顺序（比如表单控件、导航菜单），慎用
-reverse值 - 动画或 JS 查询
element.offsetLeft等位置属性时，-reverse会让数值逻辑变复杂 - 想“视觉反转但保持语义”，应优先考虑
order属性单独调整某几个项目
flex-direction 不影响换行，wrap 才管这个
初学者常以为设了 flex-direction: column 就能“自动换列”，其实不会。flex-direction 只决定主轴，是否换行由 flex-wrap 控制。主轴空间不够时，flex-wrap: wrap 才会生成新行（或新列）。
-
flex-direction: column; flex-wrap: wrap;会让项目填满容器高度后，溢出部分进入下一“列”（即右侧新纵列） - 此时
align-content控制的是这些纵列之间的间距，不是项目之间 - 注意容器需有明确高度（如
height或max-height），否则column + wrap几乎不触发换列
IE10–11 对 flex-direction 的支持有前缀陷阱
IE10–11 要求写 -ms-flex-direction，而且只支持 row/column，不支持 -reverse 值。如果用了 row-reverse 又没降级处理，IE 里直接回退到 row，可能造成布局错乱。
立即学习“前端免费学习笔记（深入）”；
- 需要兼容 IE 时，建议用 Autoprefixer 自动补全，别手写前缀
- 避免在关键流式布局中依赖
-reverse，或用 JS 检测并 fallback - 检查构建工具是否真输出了
-ms-前缀——有些新版 Autoprefixer 默认已不生成 IE10–11 前缀
flex-direction 看似简单，但和 flex-wrap、justify-content、DOM 顺序、IE 兼容性这几处一交叉，很容易漏掉隐性约束。改之前最好先确认：你真正要控制的是流向、顺序、还是换行逻辑。 
