inline-flex是行内级弹性容器，既保持行内定位又启用Flex布局；而inline-block仅是行内块，无内部弹性控制能力，且上下padding不撑开行高。
直接给容器加 display: inline-flex 就行，它不是“模拟”行内行为，而是让容器本身成为行内级元素，同时内部子项仍走 Flex 布局——这点和 display: inline-block 有本质区别。
为什么不能写成 display: inline flex
浏览器会直接忽略整条声明，回退到 display: block。CSS 不支持空格分隔的多值组合（除预设关键字如 inline-flex、inline-grid 外）。写错就等于没写，布局会意外崩掉。
inline-flex 容器里子元素还能用 Flex 属性吗
能，而且必须用。子项自动变成弹性项目（flex items），justify-content 和 align-items 生效，flex、flex-grow 等也照常工作。但注意：float、clear、vertical-align 这三个属性在子项上会失效——不是被忽略，是明确不生效。
常见对齐错位：文字和图标混排时垂直不居中
这是因为 inline-flex 容器默认 vertical-align: baseline，而旁边的文字按基线对齐，容易看起来“掉下去”。解决方法很简单：
立即学习“前端免费学习笔记（深入）”；
- 给容器加
align-items: center（控制子项垂直居中） - 同时加
vertical-align: middle（控制容器自身在行内流中的对齐位置） - 别依赖
margin-top调整——它只影响容器整体，不解决基线错位根源
父容器宽度不足时内容溢出或折行
inline-flex 默认 flex-wrap: nowrap，但它的“不换行”是硬性的：如果内容总宽超了父容器，它不会像 inline-block 那样折行，而是强行撑开或横向溢出。这时候要根据场景选策略：
- 希望单行显示：给父容器加
white-space: nowrap，并确保父容器有足够宽度或overflow: hidden - 允许折行：显式写
flex-wrap: wrap，此时子项会在主轴末尾换行，行为更接近预期 - 避免意外压缩：子项若被压窄，检查是否误设了
flex-shrink: 1（默认值），可设为flex-shrink: 0锁定尺寸
最易被忽略的一点：HTML 源码里的换行和空格，在 inline-flex 容器里完全不产生间隙；但如果你把它套在另一个 inline-block 里，反而可能触发双层基线对齐问题——这种嵌套纯属多余，直接删掉外层即可。
