flex-direction: row 是水平排列的默认值，主轴从左到右；需配合 flex-wrap、flex-shrink 及内容约束才能稳定实现预期水平布局。
flex-direction: row 是水平排列的默认值
如果不显式设置 flex-direction，容器默认就是 row，主轴从左到右，子项自然水平排列。很多开发者误以为必须写上才生效，其实省略反而更简洁、可读性更高。
- 只在需要改变方向时才设置：比如改成
row-reverse（反向水平）或column（垂直） -
row和row-reverse都属于水平主轴，但后者会影响justify-content的语义（例如flex-start变成右对齐） - 注意：IE10–11 对
row-reverse支持不完整，若需兼容，建议用order替代
水平排列时 justify-content 控制子项对齐方式
主轴是水平方向后，justify-content 才真正起作用——它只管主轴（即水平方向）的对齐，和 align-items（交叉轴）互不干扰。
-
justify-content: flex-start→ 左对齐（默认） -
justify-content: center→ 居中（常用于导航栏、按钮组） -
justify-content: space-between→ 首尾贴边，中间等距（适合工具栏） - 避免滥用
space-around或space-evenly：它们在子项宽高不一致时容易造成视觉失衡
flex-wrap 决定是否换行，影响“水平排列”的实际效果
仅靠 flex-direction: row 不能保证所有子项一定显示在同一行——如果总宽度超容器，且没设 flex-wrap，子项会强制压缩（甚至溢出），而非自动换行。
- 默认
flex-wrap: nowrap：强制单行，子项可能被压缩或溢出 - 设为
flex-wrap: wrap后，子项才按需折行，仍保持每行内水平排列 - 移动端常见问题：未设
flex-wrap导致导航菜单横向滚动，加一行就解决
别忽略 flex-shrink 和内容宽度对水平排列的影响
即使主轴是水平的，如果子项设置了 flex-shrink: 0 或固定宽（如 width: 200px），又没留足空间，依然会破坏预期排列——Flexbox 不会“强行塞下”，而是按规则缩放或溢出。
立即学习“前端免费学习笔记（深入）”；
- 默认
flex-shrink: 1允许压缩，但文本类元素可能因min-width: auto卡住不缩 - 用
min-width: 0覆盖文本最小宽限制，让flex-shrink真正生效 - 图片、图标等替换元素默认不收缩，需显式设
flex-shrink: 1或max-width: 100%
flex-direction 只是起点；真正决定水平排列是否稳定可用的，是 flex-wrap、flex-shrink 和内容自身约束的组合效果。 
