用Flexbox配合媒体查询可实现三栏→一栏响应式切换：宽屏下父容器display: flex、子项flex: 0 1 300px；窄屏（如max-width: 600px）时设flex-direction: column并重置子项为flex: none、width: 100%。
用 Flexbox 配合媒体查询（media query）实现三栏 → 一栏的响应式切换，核心是控制 flex-direction 和子项的宽度行为。关键不在“改方向”本身，而在于容器、子项、断点三者的协同设计。
确保父容器是 flex 容器且默认三栏布局
给三栏外层容器设 display: flex，子项默认等宽或按需分配（如 flex: 1），并设好基础间距和最小宽度：
- 父容器加
flex-wrap: wrap（可选，但更健壮） - 子项避免写死
width: 33.33%，优先用flex: 1或flex: 0 1 300px（推荐后者，兼顾弹性与最小宽度） - 为避免小屏下内容被过度压缩，给子项加
min-width: 0（防文字撑开）或overflow: hidden（按需）
在小屏断点将 flex-direction 改为 column
当视口变窄（例如 ≤768px），把水平排列转为垂直堆叠：
- 媒体查询中对父容器设置
flex-direction: column - 同时建议重置子项的
flex值，比如改为flex: none或flex: 1 1 auto，避免高度异常拉伸 - 若需子项占满全宽，可额外加
width: 100%（column 下 width 默认生效）
补充细节提升体验
仅改 direction 不够，还需处理常见干扰项：
立即学习“前端免费学习笔记（深入）”；
- 移除或重置子项的
margin（比如左右 margin 在 column 下可能造成横向溢出） - 检查是否有
white-space: nowrap等阻止换行的样式，小屏下易导致横向滚动 - 用
gap替代 margin 实现间隙（更语义化，且 flex-gap 在 column 下自动转为垂直间距） - 断点值建议基于内容而非设备（如
max-width: 60em），更可持续
一个精简可用的代码示例
CSS：
.layout {
display: flex;
gap: 1rem;
}
.layout > * {
flex: 0 1 300px; /* 可伸缩，最小 300px */
min-width: 0;
}
<p>@media (max-width: 600px) {
.layout {
flex-direction: column;
}
.layout > <em> {
flex: none; /</em> 禁止纵向拉伸 */
width: 100%;
}
}这样在宽屏下三栏自适应，在窄屏下自然堆成一栏，无须 JS，语义清晰，维护成本低。
