display: inline-flex 使容器为行内级元素且子项按Flex布局排列；它不因HTML空白产生间隙，支持justify-content/align-items精确控制，而inline-block会受空白节点影响且仅能靠text-align或margin模拟对齐。
display: inline-flex 是什么行为
它让容器本身成为行内级元素，但内部子项仍按 Flex 布局排列——这点和 display: inline-block 有本质区别：inline-flex 容器不会像 inline-block 那样受换行符/空格影响产生意外间隙，也不需要 hack 清除空白。
为什么不能直接用 inline + flex
display: inline 和 display: flex 无法同时生效，CSS 不支持多值组合（除非是 inline-flex 或 inline-grid 这类预设关键字）。写成 display: inline flex 会直接被浏览器忽略整条声明，回退到默认 display: block。
常见错误：父容器没给宽度或 white-space 处理不当
当 inline-flex 容器内容超宽，又没设置 white-space: nowrap 或限制父容器宽度时，它会像普通行内元素一样折行，导致布局错乱。尤其在文字+图标混合的按钮场景中容易出问题。
- 始终检查父容器是否设置了
white-space: nowrap（如果希望强制单行） - 避免在
inline-flex外层再套display: inline-block——多余且可能触发双层基线对齐问题 - 注意
vertical-align默认是baseline，和旁边文字对不齐时，优先调vertical-align: middle而不是改line-height
和 inline-block 的关键差异在哪
核心就两点：inline-flex 的子元素能用 justify-content/align-items 精确控制分布；而 inline-block 只能靠 text-align 或 margin 模拟。另外，inline-flex 不吃 HTML 源码里的换行和空格，inline-block 会把标签间的空白解析为文本节点并占位。
立即学习“前端免费学习笔记（深入）”；
比如这段 HTML：
<div class="container"> <span>A</span> <span>B</span> </div>
如果 .container 是 display: inline-block，A 和 B 之间会有约 4px 间隙；换成 display: inline-flex 就完全消失——不需要注释掉换行，也不用设 font-size: 0。
真正麻烦的是嵌套场景：子项里再用 flex 或 grid，得确认外层 inline-flex 没被父级的 overflow: hidden 或 transform 截断——这种截断不报错，但子项定位会失效，很难一眼发现。
