CSS图片画廊布局_使用Flexbox构建均匀分布的相册界面

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，而是让每张图在不同加载时机、不同设备、不同缓存状态下，都稳稳停在该在的位置。间隙、宽高比、换行阈值、图像加载节奏——这些细节一碰就偏，调一次不等于永远稳。