flex-direction 控制主轴方向，决定子元素排列流向（row水平向右、column垂直向下、row-reverse水平向左、column-reverse垂直向上），其他Flex属性均依此主轴定义；响应式中宜用媒体查询切换，避免覆盖或退化为block；align-content的对齐方向始终垂直于主轴，且仅在flex-wrap: wrap触发多行时生效。
flex-direction 控制主轴方向的核心作用
改变 Flex 布局的主轴方向，只靠 flex-direction 就够了。它直接决定子元素排列的默认流向，是水平（row）还是垂直（column），其他属性如 justify-content 或 align-items 都是围绕这个主轴定义的。
四个合法值的实际效果与常见误用
flex-direction 有四个可选值，但日常切换水平/垂直布局主要用前两个：
-
row：默认值，主轴水平向右，子项从左到右排列 -
column：主轴垂直向下，子项从上到下排列 -
row-reverse：水平但反向（从右到左），不是“垂直”，别误当翻转布局用 -
column-reverse：垂直但反向（从下到上），同样不改变主轴方向本质
注意：row-reverse 和 column-reverse 改变的是起始位置，不是主轴朝向——justify-content: flex-start 在 row-reverse 下仍对齐最右端，容易混淆。
响应式中动态切换主轴方向的写法
用媒体查询切换 flex-direction 是最干净的做法，无需 JS 干预：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
@media (min-width: 769px) {
.container {
flex-direction: row;
}
}
关键点：
- 不要在同一个规则块里写
flex-direction: row; flex-direction: column;—— 后者会覆盖前者，无效 - 避免用
display: block临时“退化” Flex，这会丢失所有 Flex 行为，包括align-items等 - 如果容器有固定高度且设了
column，记得检查子项是否溢出——垂直主轴下height变得更敏感
和 flex-wrap、align-content 搭配时的隐含依赖
align-content 只在多行 Flex 容器中生效，而“多行”由 flex-wrap: wrap 触发；但它的对齐方向始终垂直于主轴。也就是说：
- 主轴是
row（水平）→align-content控制行与行之间的**垂直间距** - 主轴是
column（垂直）→align-content控制列与列之间的**水平间距**
这个翻转逻辑常被忽略，导致加了 align-content: center 却没效果——先确认是否已触发多行（比如子项总宽 > 容器宽），再看主轴方向是否匹配预期对齐维度。
