flex-direction决定主轴方向，影响子元素排列走向及justify-content、align-items的行为逻辑：row（左→右）、row-reverse（右→左）、column（上→下）、column-reverse（下→上），且与书写方向无关。
flex-direction 决定的是主轴方向，不是“让元素横着或竖着”，而是“主轴往哪走，子元素就顺着它排”。默认是 row，所以不写也横排——但一旦你想要垂直菜单、倒序列表、或者适配 RTL 布局，就得显式设它。
flex-direction 的四个合法值怎么选
每个值对应主轴的起点和走向，直接影响 justify-content 和 align-items 的行为逻辑：
-
row：主轴从左到右，justify-content: flex-start就是左对齐，align-items: center是垂直居中（交叉轴是纵轴） -
row-reverse：主轴从右到左，justify-content: flex-start变成右对齐，但align-items不变（交叉轴没动） -
column：主轴从上到下，此时justify-content: center是垂直居中，align-items: center反而变成水平居中 -
column-reverse：主轴从下到上，justify-content: flex-start对齐底部，常用于聊天记录倒序渲染
为什么设了 display: flex 却没生效
常见原因不是语法错，而是被其他样式覆盖或隐式干扰：
- 父容器没真正启用 Flex：确认用了
display: flex或display: inline-flex，display: grid或display: block下设flex-direction完全无效 - 子元素写了
float、clear或vertical-align：这些属性在 Flex 容器里会被忽略，但容易让人误以为“方向没起作用” - 用了旧版前缀但漏掉现代写法：Safari 12.1 之前需
-webkit-flex-direction，但现在只写标准属性即可，加前缀反而可能触发兼容模式 bug - 父容器高度为
0或auto且子项无内容/尺寸：column方向时，若子项没设高，又没内容撑开，整个容器会塌陷，看起来像“没排”
flex-direction 和 flex-wrap 组合的实际影响
flex-wrap 是否生效，取决于主轴是否“装得下”。而主轴方向由 flex-direction 定义，所以两者的组合直接决定换行逻辑：
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: row; flex-wrap: wrap：一行放不下时，新行在下方（常规流） -
flex-direction: row; flex-wrap: wrap-reverse：新行出现在上方，适合悬浮工具栏叠加在内容之上 -
flex-direction: column; flex-wrap: wrap：列满后，新列在右侧（注意：此时交叉轴是水平方向，justify-content控制左右对齐） -
flex-direction: column; flex-wrap: wrap-reverse：新列出现在左侧，少见但可用于 RTL 布局中的多列新闻摘要
用 flex-flow 简写更安全，比如 flex-flow: column wrap，避免漏写 flex-wrap 导致意外溢出。
align-items 在不同 flex-direction 下的视觉错觉
很多人调 align-items: center 想“让子元素上下居中”，结果在 column 方向下发现它变成了“左右居中”。这是因为：
-
align-items始终作用于交叉轴，不是“垂直方向” -
row→ 交叉轴是纵轴 →align-items: center= 垂直居中 -
column→ 交叉轴是横轴 →align-items: center= 水平居中 - 真要“无论方向都让子项在容器正中心”，得同时配
justify-content: center+align-items: center，且容器有明确宽高
最易被忽略的是：当 flex-direction 切换时，justify-content 和 align-items 的语义角色会互换。不重读这两个属性的定义，光靠“左/右/上/下”的直觉去调，大概率调反。
