必须设置 flex-wrap: wrap 才能实现图片自动换行，仅 display: flex 不足以触发换行；子项宽度建议用 flex: 0 1 auto 或固定百分比，配合 height + overflow: hidden 和 object-fit: cover 实现等高裁剪；断点依据最小单元宽度计算，如 4 列需 ≥1168px。
flex-wrap 怎么让图片自动换行
默认情况下 flex 容器里的子项会强行挤在一行，超出就溢出或压缩——这不是画廊要的效果。必须显式设 flex-wrap: wrap，否则再多的媒体查询也救不回来。
常见错误是只写了 display: flex 就以为完事了，结果在小屏上图片被压成一条细线，或者直接横向滚动。
-
flex-wrap: wrap是换行前提，缺它不行 - 别依赖
justify-content来“撑开”换行，它只管主轴对齐，不管是否折行 - 子项宽度建议用
flex: 0 1 auto或固定百分比（如width: 33.33%），避免弹性拉伸破坏网格感
图片等宽不等高的时候怎么对齐底部
画廊里图片尺寸不一很常见，align-items: flex-start 会让所有图片顶部对齐，但底部参差不齐；设 stretch 又会强制拉高破坏比例。稳妥做法是让容器控制高度、图片居中裁剪。
- 给图片父容器（即每个
figure或div）设height: 200px（或用aspect-ratio）+overflow: hidden - 图片用
object-fit: cover+width: 100%; height: 100%，保证填满且不畸变 - 避免对图片本身设
align-self，它在flex-wrap下行为不稳定
@media 查询该在哪断点、改什么属性
断点不是拍脑袋定的，核心看 flex 项在不同宽度下能完整容纳几列。比如 4 列 → 2 列 → 1 列，对应的是容器宽度能否塞下 4 个最小宽度单元。
- 先确定单图最小合理宽度（含 margin），比如
min-width: 280px（含 16px 间距），那么 4 列需至少4 × 280 + 3 × 16 = 1168px，这就是第一个断点 - 常用断点：≥1168px（4列）、≥768px（2列）、
- 媒体查询里只需改子项
width或flex-basis，不要重复写display: flex或flex-wrap - 移动端慎用
gap，iOS Safari 15.4 之前不支持，用margin更稳
为什么用 flex 而不用 CSS Grid 做画廊
Flex 在一维布局（单向排列+换行）上更轻量、容错更强。Grid 虽然天生适合网格，但遇到动态数量、不定高图片时，grid-auto-rows 和 grid-template-columns 配合不好容易留白或重叠。
- Flex 的
flex-wrap对子项数量无要求，增删项无需改布局代码 - Grid 在 Safari 旧版本中对
grid-gap和subgrid支持混乱，而 Flex 的gap现在已较稳（除极老 iOS） - 如果真要用 Grid，务必加
grid-auto-flow: dense防止空洞，但这又可能打乱 DOM 顺序，影响可访问性
真正难的不是写出来，而是当设计师扔来一批 4:3、16:9、甚至竖图混排的素材时，怎么让 flex-basis、min-width 和 object-fit 配合得不崩、不闪、不跳。这时候多测几个真实设备宽度比调参数更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
