display: flex 是块级弹性容器，独占一行、默认撑满父宽；inline-flex 是行内弹性容器，宽度由内容决定、可与文字同行，二者子项布局规则完全相同，仅容器外部显示类型不同。
display: flex 和 display: inline-flex 的区别，只在容器自身的外部显示类型，不在子项布局行为。 二者子元素都完全遵循同一套 Flex 规则（justify-content、flex-wrap、align-items 全部有效），差异仅在于这个容器是“块级”还是“行内级”——就像 div 和 span 的区别，不是“能不能 flex”，而是“它在文档流里怎么占位”。
display: flex 是块级容器，天然独占一行
它等价于 display: block flex，所以：
- 默认宽度撑满父容器（即使内容很少），
width: fit-content或display: inline类样式无效 - 前后强制换行，无法和文字、图标、
span等行内元素同行 - 可自由设置
width/height/margin，适合做导航栏、卡片列表、表单区域这类结构化模块 - 若父容器是
span或其他行内上下文，直接套display: flex会触发浏览器的“匿名块生成”，导致布局断裂或意外换行
display: inline-flex 是行内容器，宽度由内容决定
它等价于 display: inline flex，表现更像 img 或带样式的 span：
- 不换行，能和文字、图标、按钮并排出现；多个
inline-flex容器默认横向排列 -
width: 100%在多数情况下无意义——因为它的宽度天生是“最小内容宽度”，不是“可用宽度” -
vertical-align生效，可用于对齐文本基线；margin和padding四个方向都起作用 - 子项不换行（
flex-wrap: nowrap）时，容器会随子项变宽，可能突破父容器边界——这不是 bug，是它按内容伸缩的本性
inline-flex 容器之间有空格间隙？这是真实问题
HTML 中的换行符和空白符会被渲染为一个空格，导致相邻 inline-flex 容器间出现约 4px 间隙：
立即学习“前端免费学习笔记（深入）”；
- 用
font-size: 0压缩父容器字体大小，再给子项单独设font-size - 把 HTML 中的换行删掉，写成一行：
<div class="group"><button>A</button><button>B</button></div> - 或用注释消除空白：
<div class="group"><button>A</button><!-- --><button>B</button></div>
什么时候该选 inline-flex 而不是 flex？
关键看容器是否需要嵌入文本流：
- 搜索框 + 按钮组合：要和旁边说明文字同行 → 用
inline-flex - 标签云（tag list）：每个标签需等宽/居中，又得嵌在段落里 →
inline-flex - 表单内联操作区（如“输入框 + 清空按钮 + 提交按钮”）→
inline-flex - 整个导航栏、侧边栏、轮播容器 → 必须用
flex，否则会塌成一行挤在一起
最容易被忽略的一点：当你给 inline-flex 加了 overflow-x: auto 却没设 width，它仍会无限延伸——因为它的“自然宽度”就是所有子项加起来的宽度。想让它响应式约束，得手动加 width: 100% 和 box-sizing: border-box，但这已偏离其设计初衷。
