Flexbox响应式布局应移动端优先，默认flex-direction: column，媒体查询中动态调整flex-direction、flex-wrap和justify-content；尺寸控制交由子元素，主容器仅设display: flex及对齐属性。
Flexbox基础布局怎么写才不被媒体查询搞乱
直接用 display: flex 做主容器，但别急着设 flex-direction 或 flex-wrap —— 这些恰恰是媒体查询里最该动态调整的属性。移动端优先时，默认设 flex-direction: column，桌面端再用媒体查询切回 row；反过来则容易导致小屏内容横向溢出，且难以用 overflow-x: hidden 拯救。
常见错误：在根容器上直接写 flex: 1 或 flex-grow: 1，结果媒体查询一改方向，子项拉伸逻辑就错位。应把尺寸控制交给具体子元素（如 flex-basis 或 max-width），而非依赖父容器的弹性分配。
- 主容器只设
display: flex和必要对齐（justify-content,align-items） - 子项用
flex: 0 1 auto（不放大、可缩小、按内容宽）作为安全默认 - 避免在
@media外层直接写flex-wrap: wrap，等断点内再加，否则小屏可能意外换行
哪些Flexbox属性必须放进媒体查询里
不是所有 Flexbox 属性都适合响应式切换。真正需要媒体查询干预的只有三类：流向（flex-direction）、换行（flex-wrap）、主轴对齐（justify-content）。其他如 align-items、gap、order 可全局设置或按需微调，但很少需要随屏幕尺寸翻转逻辑。
例如，导航栏在桌面端希望左对齐 logo、右对齐菜单（justify-content: space-between），小屏则全居中堆叠（justify-content: center + flex-direction: column）。这时候 justify-content 就得进媒体查询，而不是靠 JS 动态改 class。
立即学习“前端免费学习笔记（深入）”；
-
flex-direction：最常切换，column→row是主流模式 -
flex-wrap：小屏禁用换行（nowrap）防内容挤扁，大屏启用（wrap）让卡片流式排列 -
justify-content：仅当主轴方向改变后，对齐语义才变化（比如从水平排布变成垂直排布，space-between在垂直方向就变成上下撑满）
媒体查询断点选多少才不踩坑
别迷信 768px 或 1024px。实际项目中，断点应该由内容决定，而不是设备。先写好 Flexbox 布局，然后在浏览器里缩放窗口，观察哪一刻文字开始挤压、图片被裁剪、按钮重叠——那个宽度就是你的断点。用 min-width 而非 max-width 写媒体查询，更符合渐进增强逻辑，也方便后续扩展更大屏幕。
一个典型组合：@media (min-width: 48em)（即 768px）切导航为横排，@media (min-width: 62em)（992px）让侧边栏脱离主内容流（flex-direction: row + flex: 1 主区域）。注意单位统一用 em，它基于用户字号，比 px 更可访问。
- 避免多个紧邻断点（如 768px、769px），CSS 会按顺序覆盖，容易误判生效规则
- 不要在同一个媒体查询里混用 Flexbox 和 Grid 布局逻辑，调试时很难定位是哪个容器在起作用
- 用
prefers-reduced-motion媒体查询配合 Flexbox 动画（如transition: flex-basis 0.2s）时，记得加reduced回退方案
Flexbox响应式布局最容易忽略的兼容性细节
IE11 支持 Flexbox 但有严重 bug：不识别 flex-basis: auto，会当成 0；flex: 1 在多层嵌套时行为异常；align-self 在某些父子 flex 设置下失效。如果还要支持 IE11，必须用 Autoprefixer 编译，并手动补 -ms-flex- 前缀，且避免用 gap（IE 完全不支持，得用 margin 模拟）。
另一个隐形陷阱：Safari 旧版本（≤14.1）对 flex-wrap: wrap-reverse 渲染错乱，如果用了这个值做反向列表，务必在媒体查询里单独屏蔽 Safari 或降级为 JS 控制顺序。
- 检查
flex-flow缩写是否被目标浏览器完整支持（部分安卓 WebView 解析不全） - 用
flex-shrink: 0锁定关键元素（如 logo 图片）不被压缩，否则媒体查询切方向后可能突然消失 - 服务端渲染（SSR）场景下，Flexbox 的响应式表现依赖客户端 CSS 加载完成，首屏可能出现闪动，需用
data-loadedclass 控制初始状态
