flex-wrap + flex-basis 是响应式图片排列的核心组合，需配合 min-width: 0、box-sizing: border-box 及各断点显式声明 display: flex 和 flex-wrap 才能可靠生效。
flex-wrap + flex-basis 是响应式图片排列的核心组合
纯靠 flex: 1 让图片等宽，在小屏下会把图片压成窄条甚至文字折行错乱。真正可控的方式是用 flex-wrap: wrap 配合 flex-basis 控制每项基础宽度，让浏览器自动决定换几行。
常见错误现象：flex: 1 在手机上图片被挤成一条细线 → 实际是没设 flex-wrap，也没限制最小宽度
- 桌面端（≥1024px）：设
flex: 0 0 calc(25% - 20px)，每行 4 张，减去 gap 的一半 - 平板（768px–1023px）：改
flex: 0 0 calc(33.333% - 15px)，每行最多 3 张 - 手机（≤767px）：直接
flex: 0 0 100%，单列铺满 - 必须加
min-width: 0和box-sizing: border-box，否则 padding 或边框会让 flex-basis 失效
order 只在 flex-direction: column 下才稳定翻转图文顺序
想让小屏时文字在上、图片在下，但 HTML 里图片写在前面（语义和 SEO 要求），别动 DOM —— 用 order 是唯一不破坏结构的方案。但它只在单列布局中可靠。
常见错误现象：写了 order: 2 却没生效 → 父容器没设 display: flex，或子项用了 display: contents；文字区域突然变窄 → 图片元素误设 flex: 1，应改为 flex: 0 0 auto
立即学习“前端免费学习笔记（深入）”；
- 移动端媒体查询里必须显式设
flex-direction: column，否则order不起作用 - 每个断点都要重写
order值，不能依赖“之前设过”，浏览器不会继承 - 避免和
float、position: absolute混用，后者会让order完全失效 - 图片记得加
max-width: 100%和height: auto，否则小屏下会被拉伸变形
媒体查询里漏写 display: flex 就等于没开 Flex 上下文
很多布局“突然失效”，不是 Flex 写错了，而是媒体查询里只改了 flex-direction 或 order，却忘了声明 display: flex。媒体查询是独立作用域，不继承父级 display 值。
常见错误现象：小屏下图片堆成一列但不居中、间距消失 → 实际是容器退化为 block，justify-content 和 gap 全部失效
- 每个需要 Flex 行为的断点，都必须完整写
display: flex（或inline-flex） - 如果用了
flex-wrap: wrap，也要在对应断点里显式写出，不能只靠初始值 - 用开发者工具检查 computed 样式，确认
display确实是flex，而不是block或inline
flex-wrap: wrap + order 组合会导致多行视觉断层
当图片卡片列表启用了 flex-wrap: wrap，又对每张卡片里的图文用 order 调序，会出现第二行第一个元素视觉上排在第一行最后一个之后——因为 order 是按“每行内部排序”，不是全局排序。
常见错误现象：卡片列表换行后，第二行的图片突然跑到文字前面，顺序错乱
- 优先方案：外层用
display: grid控制行列，每张卡片内部再用 flex + order - 若坚持全 Flex，就把每张卡片包一层
<div>，让order作用于卡片级，而非图文级 - 绝对不要给
flex-wrap容器里的子项同时设width和order，旧版 Firefox 会解析异常
图片尺寸控制、order 生效条件、flex 上下文维持，这三个点只要漏掉一个，响应式就容易在某个断点崩掉。尤其是 display: flex 必须在每个媒体查询里显式出现，这点最容易被忽略。
