主轴方向由flex-direction决定，必须配合display:flex使用；row（水平向右）、row-reverse（水平向右但顺序反转）、column（垂直向下）、column-reverse（垂直向下但顺序反转）；justify-content仅在已定主轴上分配空间，不改变方向。
主轴排列不正确，通常是因为 flex-direction 的值没设对。Flex 布局的主轴方向由它决定，而不是靠 justify-content 或元素顺序“强行调整”。先确认你想要的排列方向，再选对属性值。
明确主轴方向对应关系
flex-direction 有四个常用值，直接决定主轴走向：
- row（默认）：主轴水平向右，子元素从左到右排列
- row-reverse：主轴水平向右，但子元素从右到左排列（顺序反转，主轴方向不变）
- column：主轴垂直向下，子元素从上到下排列
- column-reverse：主轴垂直向下，但子元素从下到上排列
检查父容器是否设置了 flex 布局
只设 flex-direction 不生效？很可能忘了给父元素加 display: flex：
.container {
display: flex; /* 必须先启用 flex */
flex-direction: column; /* 再指定主轴方向 */
}没有 display: flex 或 display: inline-flex，flex-direction 等属性会被忽略。
立即学习“前端免费学习笔记（深入）”；
注意与 justify-content 的区别
justify-content 只负责在**已确定的主轴上**分配剩余空间，它不会改变主轴方向：
- 主轴是
row时，justify-content: flex-end把元素推到最右边 - 主轴是
column时，同一句代码会把元素推到最底部
如果发现元素“没按预期对齐”，优先检查 flex-direction 是否符合当前布局意图，而不是盲目调 justify-content。
响应式中动态切换主轴方向
可以用媒体查询适配不同屏幕：
.container {
display: flex;
flex-direction: column; /* 小屏竖排 */
}
<p>@media (min-width: 768px) {
.container {
flex-direction: row; /<em> 大屏横排 </em>/
}
}这种写法比用 flex-wrap 或 JS 控制更简洁稳定，适合导航、卡片组等常见场景。
