flex-wrap 必须设为 wrap；否则图片强行挤在一行并溢出容器，无法自动折行，小屏适配失效——这是最常被忽略的起点错误。
Flexbox 实现图片画廊时，flex-wrap 必须设为 wrap
不加 flex-wrap: wrap，所有图片会强行挤在一行，溢出容器且不换行——这是最常被忽略的起点错误。
实际场景中，你希望相册在小屏自动折行、大屏保持多列，flex-wrap 就是开关。它默认是 nowrap，必须显式覆盖。
-
flex-wrap: wrap是基础前提，缺它整个布局就“卡死” - 如果用
flex-direction: column，则需配合flex-wrap: wrap-reverse或高度约束，否则无法按列填满 - 某些旧版 Safari（flex-wrap 在
inline-flex容器中的支持不稳定，建议外层用display: flex
每张图片用 flex-basis 控制列宽，别只靠 width
仅设置 width: 25% 会让图片在缩放或内容变化时失去弹性；flex-basis 才真正决定主轴初始尺寸，且与 flex-grow/flex-shrink 协同工作。
例如三列布局，理想状态是每项占 33.33%，但需留出间隙余量：
立即学习“前端免费学习笔记（深入）”；
img {
flex: 0 0 calc(33.333% - 12px);
margin: 6px;
}-
flex: 0 0表示不放大不缩小，只按flex-basis占位 - 用
calc()减去左右 margin 总和，避免因盒模型导致换行错乱 - 避免对
img直接设width: 100%，否则可能拉伸失真；应配合object-fit: cover和固定宽高比容器
响应式断点里，flex-basis 要随屏幕重算，不是简单改 width
很多人在媒体查询里只改 width，但 Flexbox 的响应逻辑依赖 flex-basis —— 它才是 Flex item 的“基准尺寸”，width 只是视觉表现。
- 小屏（flex-basis: calc(50% - 8px)，两列+间隙
- 超小屏（flex-basis: 100%，单列铺满
- 不要在媒体查询里写
width: 50%+flex-basis: auto，会导致行为不一致，尤其在 Safari 中 - 如果用了
gap替代 margin，flex-basis就不用减间隙值，但注意gap不支持 IE 和部分老 Android 浏览器
图片加载未完成时，flex 容器高度塌陷，得用 aspect-ratio 或伪元素占位
原生 img 加载前无尺寸，Flex 容器无法计算高度，造成布局抖动甚至错行——这不是 Flexbox 的 bug，是图片加载机制本身的问题。
- 现代方案：给图片父容器（如
<figure></figure>）加aspect-ratio: 4/3，兼容 Chrome 103+、Firefox 98+、Safari 16.4+ - 兼容方案：用伪元素撑开容器高度，例如
::before { content: ""; display: block; padding-top: 75%; } - 避免对
img设height: 100%且父容器没高度，那只会让图片消失 - 服务端若能提供宽高属性（如
<img style="max-width:90%" style="max-width:90%" alt="CSS图片画廊布局_使用Flexbox构建均匀分布的相册界面" >），浏览器可提前预留空间，比 CSS 更可靠
真正难的不是写几行 Flex，而是让每张图在不同加载时机、不同设备、不同缓存状态下，都稳稳停在该在的位置。间隙、宽高比、换行阈值、图像加载节奏——这些细节一碰就偏，调一次不等于永远稳。
