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，子项会强制压缩（甚至溢出），而非自动换行。
