flex-direction 决定主轴方向，justify-content 依主轴对齐子元素；row 时水平对齐，column 时垂直对齐；space-between 首尾贴边、中间均分，space-around 各项两侧等距、首尾边距减半。
flex-direction 和 justify-content 是移动端 Flex 布局最常用、最轻量的两个控制点，但它们不是“万能开关”——用错主轴方向或混淆对齐逻辑，反而会让布局更难调。
先确认主轴方向，再决定用哪个 justify-content 值
很多人一上来就写 justify-content: center，结果发现没居中，其实是主轴方向没设对。默认 flex-direction: row（水平主轴），这时 justify-content 控制的是**水平排列**；如果改成 flex-direction: column，主轴变成垂直方向，justify-content 就管**上下排列**了。
- 想让三个按钮从上到下等距分布？先写
flex-direction: column，再配justify-content: space-between - 想让图标和文字水平居中对齐？保持
row，用justify-content: center即可 -
space-between要求至少 2 个子元素才生效，1 个时表现和flex-start一样
justify-content: space-around 和 space-between 的实际间距差异
这两个值常被混用，但视觉效果差别明显：
-
space-between：首尾元素紧贴容器边缘，中间间隙均分 —— 适合导航栏、步骤条这类需要“两端锚定”的场景 -
space-around：每个元素两侧留出相等空白，相当于在每个 item 前后加了 margin —— 实际首尾元素离容器边距是中间间隙的一半 - 如果容器有 padding，
space-around的“外围空白”会叠加 padding，容易撑出意外留白
移动端必须考虑的兼容性断点
Flex 在 iOS Safari 9+、Android Chrome 48+ 基本无压力，但以下两点仍需手动兜底：
- IE 11 对
flex-direction: column-reverse支持不全，慎用于关键路径 - 老版 UC 浏览器（Android 4.4）可能忽略
justify-content: space-evenly（它不支持该值），只认space-between和space-around - 若用
display: flex替代传统浮动布局，记得移除子元素上的float、vertical-align，它们在 Flex 容器里直接失效
真正卡住人的，往往不是属性记不住，而是改了 justify-content 没反应，却忘了检查父容器有没有漏写 display: flex，或者被嵌套的 flex 容器干扰了主轴继承关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
