最直接的响应式 flex 布局控制点是 flex-direction：默认 column（小屏竖排），在 min-width 断点下覆盖为 row（大屏横排）；需协同调整 flex-wrap、flex-grow/shrink、justify-content 和 align-items，避免孤立修改导致布局垮塌。
flex-direction 在不同屏幕宽度下怎么切
响应式 flex 布局最直接的控制点就是 flex-direction：小屏竖排（column），大屏横排（row）。别靠 JS 切换，用媒体查询就够了。
常见错误是只写一次 flex-direction: row，没在断点里重置。正确做法是默认设为 column，再在中大屏覆盖：
.container {
display: flex;
flex-direction: column;
}
<p>@media (min-width: 768px) {
.container {
flex-direction: row;
}
}- 优先用
min-width而非max-width，避免多层嵌套覆盖混乱 - 移动端优先时，
column是合理默认值，语义更自然 - 注意 Safari 旧版本对
flex-direction动画支持差，别加transition
flex-wrap 怎么配合 media query 防止溢出
当子项变多或变宽，flex-wrap: wrap 是防止横向滚动的关键。但不是所有场景都该开启——小屏下强行 wrap 可能导致高度失控，大屏下不 wrap 又容易撑破容器。
典型策略是：小屏强制单列（flex-direction: column + flex-wrap: nowrap），中屏开始允许折行：
立即学习“前端免费学习笔记（深入）”；
.items {
display: flex;
flex-wrap: nowrap;
}
<p>@media (min-width: 640px) {
.items {
flex-wrap: wrap;
}
}</p><p>@media (min-width: 1024px) {
.items {
flex-direction: row;
}
}-
flex-wrap和flex-direction要协同调整，否则可能产生意外空白或重叠 - 搭配
flex-basis或min-width控制子项最小尺寸，避免小屏下子项被过度压缩 - 某些安卓 WebView 对
flex-wrap: wrap-reverse支持不稳定，慎用
flex-grow / flex-shrink 在响应式中为什么常要重置
默认 flex: 0 1 auto 在不同宽度下表现差异大：小屏时 flex-shrink: 1 会让内容被压扁，大屏时 flex-grow: 0 又导致留白过多。
响应式中建议显式控制收缩与拉伸行为：
.card {
flex: 0 0 100%;
}
<p>@media (min-width: 768px) {
.card {
flex: 1 1 50%; /<em> 两栏 </em>/
}
}</p><p>@media (min-width: 1280px) {
.card {
flex: 1 1 33.333%; /<em> 三栏 </em>/
}
}-
flex: 1看似简洁，但等价于flex: 1 1 0%，会忽略内容自然宽度，小屏下易错乱 - 用
flex-basis配合百分比时，确保父容器有明确宽度（比如width: 100%），否则百分比计算失效 -
flex-shrink: 0能防止图片/卡片被压缩变形，但需配合max-width防止溢出
justify-content 和 align-items 的断点陷阱
很多人以为 justify-content: center 在小屏和大屏下效果一致，其实不然：小屏时容器窄，居中可能让内容紧贴边缘；大屏时又可能因左右留白过大显得空洞。
更稳妥的方式是按场景切换对齐方式：
.nav {
display: flex;
justify-content: space-between;
}
<p>@media (max-width: 767px) {
.nav {
justify-content: flex-start;
flex-direction: column;
}
}- 小屏用
flex-start或center更安全，space-between容易在项少时拉开过大间距 -
align-items在column下影响的是水平对齐，在row下影响的是垂直对齐，切换方向时务必同步检查 - 避免在媒体查询里只改一个对齐属性而忽略另一个，比如改了
justify-content却忘了align-items: stretch在小屏下拉高卡片的问题
真正难的不是写几个媒体查询，而是判断哪些 flex 属性在哪个断点必须联动变化——方向、换行、拉伸、对齐，它们从来不是孤立的。漏掉任意一环，布局就可能在某个设备上突然“垮掉”。
