flex 布局应优先于 inline-block，因其天然规避文档流对齐副作用：彻底解决空白间隙、vertical-align 失效及静态布局限制，且无需 font-size: 0 等防御性 css。
Flex 布局在绝大多数生产场景下都应优先于 inline-block，核心原因是它彻底绕开了文档流对齐的副作用，而 inline-block 的间隙、对齐、换行控制全靠“修修补补”。
为什么 inline-block 总要处理空白间隙？
inline-block 元素之间的换行符或空格会被浏览器渲染成一个空白字符（通常是 4px 宽），这不是 bug，而是 HTML 文本解析规则导致的。你写成多行 HTML，就等于在元素间插入了空格。
- 常见修复方式：
font-size: 0在父容器上，再给子元素显式设回font-size - 其他方案：HTML 中删掉换行/用注释连接标签（
<div></div> <!-- --><div></div>），但可读性差 - 一旦嵌套层级变深或使用 CMS 渲染 HTML，这些“技巧”极易失效
Flex 能天然解决 vertical-align 失效问题
用 inline-block 时，想让不同高度的按钮或卡片底部对齐，必须依赖 vertical-align: bottom；但这个属性只作用于行内上下文，且受父容器 line-height 干扰，经常“看起来对齐了，实际没对齐”。
-
flex下只需一句align-items: flex-end，所有子项交叉轴对齐完全可控 - 如果子项本身是文本+图标混合，
vertical-align还得逐个调，align-items一次生效 - 响应式中子项高度动态变化时，
vertical-align完全无能为力，align-items依然稳定
Flex 的伸缩能力是 inline-block 完全不具备的
inline-block 是“静态并排”，每个元素宽度固定，超出父容器就折行或溢出，无法自动分配剩余空间。
-
flex-grow让某个项目吃掉剩余宽度，flex-shrink控制压缩优先级，flex-basis设初始尺寸——三者组合可实现自适应表单、等宽卡片栅格、搜索框+按钮弹性组合 -
inline-block配合width: calc(100% / 3)看似可行，但小数像素四舍五入会导致最后一项换行，且不支持内容驱动的弹性收缩 -
flex-wrap: wrap可控换行，inline-block换行时机由父容器宽度和字符宽度共同决定，不可预测
inline-flex 和 flex 的选择不是“要不要 Flex”，而是“容器该块级还是行内”
很多人纠结该用 display: flex 还是 display: inline-flex，其实这是个伪命题——二者子项布局行为完全一致，区别只在容器自身是否参与文本流。
- 导航栏、卡片列表、表单区域这类结构模块，用
display: flex（块级容器）更自然 - 搜索框 + 按钮、标签组、工具栏图标这种要和文字同行的小部件，才需要
display: inline-flex - 误把
inline-flex当作“轻量版 flex”来替代inline-block是常见误区：它解决的不是“能不能并排”，而是“容器要不要占满一行”
真正容易被忽略的是：只要用了 Flex，你就不再需要操心 white-space、font-size: 0、vertical-align 这些“防御性 CSS”，而这些恰恰是 inline-block 在真实项目里最常翻车的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
