flex-direction 可通过媒体查询响应式切换（小屏column、大屏row）或JS动态增删class实现横竖布局转换，需同步调整justify-content、align-items及flex-wrap等配套属性。
用 flex-direction 切换横排（row）和竖排（column）非常直接，关键在于控制条件触发时机——比如响应式断点、用户交互或 JS 状态变化。
响应式自动切换：用媒体查询
最常用场景是小屏竖排、大屏横排。只需在不同断点下修改 flex-direction：
.container {
display: flex;
flex-direction: column; /* 默认竖排 */
}
<p>@media (min-width: 768px) {
.container {
flex-direction: row; /<em> 宽屏变横排 </em>/
}
}点击切换：用 class 控制方向
配合 JS 切换一个 class，CSS 里定义两套方向规则：
.layout {
display: flex;
}
<p>.layout--vertical {
flex-direction: column;
}</p><p>.layout--horizontal {
flex-direction: row;
}JS 示例：
立即学习“前端免费学习笔记（深入）”；
const container = document.querySelector('.layout');
container.classList.toggle('layout--vertical');
container.classList.toggle('layout--horizontal');注意对齐和换行的配套调整
方向变了，相关属性也要同步考虑：
-
主轴对齐：
justify-content在row时控制左右，在column时控制上下，可保持语义一致（如都用center） -
交叉轴对齐：
align-items同理，方向切换后效果不变，通常无需改 -
是否换行：横排内容多时可能需加
flex-wrap: wrap；竖排一般不换行，但若子项高过大，也可用flex-wrap: wrap配合flex-direction: column实现“列内折行”（较少见）
避免常见坑
- 没写
display: flex——flex-direction不生效 - 父容器高度未设（竖排时子项高度撑不开），导致内容被裁或错位
- 子项用了固定
width却没在竖排时重置，造成横排挤占、竖排过宽 - 用
flex: 1等弹性值时，方向切换后行为仍正确，但建议测试极端尺寸下的表现
基本上就这些。核心就是把 flex-direction 当作一个可切换的样式属性，搭配合适的触发机制和配套样式，就能自然实现横竖布局自由转换。
