媒体查询中必须显式声明display: flex，因其为独立作用域，不继承父级display值；漏写会导致order、justify-content等属性失效，各断点均需完整重写。
为什么媒体查询里 display: flex 不能省略
很多开发者写完默认 Flex 布局后，在 @media 里只改 flex-direction 或 order，结果小屏下布局完全不生效——根本原因是浏览器不会继承父级的 display 值。媒体查询是独立作用域，display: flex 必须显式重写。
常见错误现象：order 在移动端没效果、项目堆成一列但没居中、justify-content 失效。
- 每个断点都得带上
display: flex（或display: inline-flex） - 如果容器原本用
display: grid，媒体查询里切 Flex 时更要主动覆盖 - 用 DevTools 检查 computed 样式，确认
display确实是flex而非block
flex-wrap: wrap 和媒体查询怎么配合才不翻车
flex-wrap: wrap 是让项目自动折行的关键，但它在小屏下容易引发高度失控或换行错位。单纯靠它撑起响应式，不如结合断点做明确控制。
使用场景：导航栏、卡片列表、表单字段组。
立即学习“前端免费学习笔记（深入）”；
- 默认设
flex-wrap: wrap，但中等屏（如@media (min-width: 768px)）可关掉：flex-wrap: nowrap防止意外折行 - 移动端（
@media (max-width: 480px)）建议配flex-direction: column+align-items: stretch，避免项目宽度塌缩 - 别依赖
flex-basis控制换行点，它受内容长度影响大；优先用min-width给项目设底线（如min-width: 200px）
order 属性在媒体查询里必须重写整套值
order 不会“叠加”或“继承”，每个媒体查询块里必须完整写出你想要的顺序。漏写某个项目的 order，它就回退到默认值 0，极易打乱视觉流。
典型问题：移动端菜单图标跑到文字后面、侧边栏内容挤到主区域上方。
- 所有参与排序的项目，在每个断点里都要显式声明
order - 避免用负数序号（如
order: -1），不同浏览器解析略有差异，统一用 0、1、2… 更稳 - 和
float或position: absolute同时用时，order直接失效——这类组合应彻底避免
图片在 Flex + 媒体查询下变形怎么办
Flex 容器本身不限制子元素尺寸，图片在小屏下常被拉宽或压扁，不是 Flex 写错了，而是缺了基础约束。
关键点：图片不是 Flex 项目的问题，是尺寸未隔离。
- 给图片加
max-width: 100%和height: auto，这是必选项 - 如果图片包在
div里，确保该容器没设死width或flex-basis - 媒体查询里调整图片容器时，别只改
flex属性，顺手检查padding和margin是否挤压了可用空间
