Flex比inline-block更可靠，因其天然忽略HTML空白符、gap精准控距、flex:1自动均分且兼容flex-wrap换行，无需font-size:0等hack，避免间隙、错位与溢出问题。
用 display: flex 是当前最稳、最易控的方案，别再用 float 或靠 white-space: nowrap 强撑——前者要清浮动、后者一窄就溢出，还容易踩到间隙和换行逻辑混乱的坑。
为什么 flex 比 inline-block 更可靠
常见错误现象：图片错位、横向滚动条出现、某张图突然变细——大概率是漏了 max-width: 100% 或没设 min-width: 0（Flex item 默认最小宽度为内容宽度，会阻止缩小）。
-
inline-block依赖父容器font-size: 0消除 HTML 换行符间隙，但子元素必须手动恢复字体大小，稍不注意文字就看不见 -
flex天然忽略 HTML 空白符，不用 hack，gap控制间距更安全，不会干扰布局计算 -
flex: 1让图片平分可用空间，比写死width: 33.333%更健壮，它自动扣除gap占位 - 加
flex-wrap: wrap后，小屏自动折行为单列；不加则强制一行，但需确保容器够宽，否则图片会被压缩或溢出
flex 布局的关键 CSS 写法
核心就三句，缺一不可：
- 父容器设
display: flex和gap（比如gap: 12px） - 图片加
flex: 1（均分）+max-width: 100%（防撑破）+min-width: 0（允许压缩） - 若父容器高度固定（如
height: 200px），图片还需height: 100%+object-fit: cover或contain，避免拉伸或留白
示例：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.gallery { display: flex; gap: 12px; flex-wrap: wrap; }
.gallery img { flex: 1; max-width: 100%; min-width: 0; height: auto; }
带图说（figcaption）时怎么不换行
- 结构必须是：
描述 - 对
display: inline-block或display: flex，再统一控制父容器的text-align或justify-content - 如果选
inline-block，父容器仍要加font-size: 0消间隙；选flex就彻底绕开这个问题 - 想等高显示？给
align-items: start，防止底部对齐把小图拉长
兼容性与退化处理
IE11 不支持 grid，也不支持 gap 在 flex 中（仅支持现代浏览器），但 flex 本身兼容 IE10+。
- 若必须兼容 IE10/11，放弃
gap，改用margin-right+ 最后一项margin-right: 0（需 JS 或 nth-child） - 不要用
grid-template-columns: repeat(auto-fit, ...)，IE 完全不认；退化方案仍是inline-block+font-size: 0 - 移动端小屏下，优先让图片折行而非缩放——这是用户可读性的底线，
flex-wrap: wrap就是为此存在
真正容易被忽略的是 min-width: 0 和 max-width: 100% 的组合：没它，原始尺寸差异大的图会在 flex 容器里互相挤压，导致布局突兀甚至溢出。这不是“写了 flex 就完事”的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
