flex-direction直接决定主轴方向：row时x轴为主轴，justify-content控制水平对齐；column时y轴为主轴，justify-content控制垂直对齐；必须配合显式height（column下）或width（row下）才能生效。
flex-direction 直接决定主轴方向，所有其他 flex 属性（如 justify-content、flex-grow、order）都按它定义的主轴来计算和渲染。
flex-direction 的四个取值对应哪条主轴
它不是“旋转布局”，而是切换主轴身份：哪个轴是主轴，哪个就是项目排列和尺寸计算的基准轴。
-
row（默认）：x 轴为主轴 →width控制主轴空间，justify-content沿水平方向生效 -
row-reverse：仍是 x 轴为主轴，但起点在右 →flex-start变成右侧对齐，order的视觉顺序也反转 -
column：y 轴为主轴 →height成为主轴尺寸依据，justify-content现在控制垂直对齐 -
column-reverse：y 轴为主轴，起点在下 → 项目从底部向上堆叠，flex-end对齐到顶部
为什么 justify-content 在 column 下看起来“失效”了
常见错觉：给 flex-direction: column 的容器设 justify-content: center，内容没居中。实际原因是——你没给容器设 height。
- 主轴变成 y 轴后，
justify-content只在主轴（即高度方向）起作用 - 如果容器
height是auto（由子项撑开），那主轴长度 = 子项总高度，没有“剩余空间”可居中 - 必须显式设置容器
height（比如height: 100vh或固定值），justify-content才有空间可分配
flex-basis 和 order 的行为会跟着主轴变
flex-basis 始终沿主轴方向生效，order 排序也按主轴流向进行，不是 DOM 顺序。
-
flex-direction: row时：flex-basis: 200px表示“主轴方向宽度为 200px” -
flex-direction: column时：flex-basis: 200px表示“主轴方向高度为 200px” -
order: 1的元素，在row下排第二，在column-reverse下反而出现在最上方（因为主轴起点在底部）
最容易被忽略的是：主轴一换，width/height 的语义就互换了，而很多开发者仍习惯用 width 控制横向、height 控制纵向，结果在 column 下发现尺寸不生效——其实该调 height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
