inline-flex 是行内级弹性容器，可与 inline-block 或 inline 元素同行显示；与 block 元素共存时会因 block 独占一行而换行，需将 block 转为 inline-block 或统一用 flex 布局协调排列。
在CSS布局中，inline-flex 是一种将弹性盒子（flexbox）功能与行内元素特性结合的显示方式。它允许一个容器使用 flex 布局的同时，仍像行内元素一样参与文档流，不会独占一整行。当你希望将一个 flex 容器嵌入文本流中，或与其他行内/行内块元素并排显示时，
display: inline-flex就非常有用。
inline-flex 与 block 元素共存的基本行为
当 inline-flex
容器与普通 block 元素（如 div、p）共处同一父容器时，它们的行为有明显差异：
- inline-flex 容器：表现为行内级元素，只占据内容宽度，可与其它行内元素在同一行显示
- block 元素：默认独占一行，从上到下堆叠排列
- 它们可以共存于同一个父级容器中，但 block 元素会打断行内流，导致换行
如何让 inline-flex 与 block 元素合理布局
若想让
inline-flex和 block 元素协同工作，需注意以下几点：
- 将 block 元素设置为
display: inline-block
或display: inline
，使其不强制换行 - 使用
vertical-align
控制垂直对齐，避免出现错位 - 若必须保留 block 特性，可将所有元素包裹在 flex 容器中，统一用 flex 布局管理
实用示例：按钮组混合布局
假设你想创建一组操作按钮，其中部分是普通块级按钮，另一些是带图标的 inline-flex 按钮：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <button class="block-btn">保存</button> <button class="icon-btn">⭐</button> <button class="icon-btn">⚡</button> </div>
这里将 block 按钮改为
inline-block，而图标按钮使用
inline-flex实现居中布局，两者自然并排显示。
注意事项与兼容性
inline-flex
支持现代浏览器，IE11+ 可用- 不要期望 block 元素和 inline-flex 在标准文档流中完美同行，除非调整 display 类型
- 若布局复杂，建议统一使用 flex 或 grid，避免混合模式带来的对齐问题
inline-flex能让你在保持行内特性的前提下享受 flex 布局的便利，与 block 元素搭配时稍作调整即可实现理想效果。
