display: flex 是块级弹性容器，独占一行、默认撑满父宽；display: inline-flex 是行内弹性容器，宽度由内容决定、可与文字同行。二者子项布局规则完全相同，区别仅在于容器自身的外部显示类型。
display: flex 是块级容器，会独占一行
它让元素变成 block 级别弹性容器，行为和 div 一样：默认宽度占满父容器、前后强制换行、可设 width/height、能用 margin 控制外边距。
常见错误是给 display: flex 容器设 width: fit-content 或 inline 相关样式，结果无效——因为它的外部显示类型就是块级，不响应行内尺寸逻辑。
- 适合页面级结构：导航栏、卡片列表、表单区域
- 若父容器是
inline元素（如span），直接套display: flex会导致布局断裂（块级元素不能嵌在行内上下文中） - 子项的
flex行为完全不受影响，该伸缩还是伸缩
display: inline-flex 是行内级容器，宽度由内容决定
它本质是 inline-block + Flex 布局能力，容器本身像 img 或 span 那样参与文本流：可以和文字、图标同行，不会撑满父宽，width 设百分比通常无意义，vertical-align 生效。
典型坑点：设了 width: 100% 却发现没效果，或容器莫名换行——其实是父容器剩余空间不够，或者没处理 white-space 和 font-size: 0 导致的空白符干扰。
- 适合嵌入式小模块：搜索框+按钮组合、标签组、工具栏图标排布
- 多个
inline-flex容器可并排，但要注意它们之间空格字符会生成间隙（可用font-size: 0或注释删空格解决） - 子项同样走完整 Flex 规则，
justify-content、flex-wrap全部可用
flex-wrap: nowrap 下，inline-flex 容器会随子项变宽
这是实际开发中最容易被忽略的差异点。当子项很多且不允许换行时，display: flex 容器会被父容器约束（比如 max-width 或 overflow 截断），而 display: inline-flex 容器会突破父宽，横向无限延伸——因为它只按内容计算自身尺寸。
比如做横向滚动标签栏，用 inline-flex 更自然；但若要限制宽度并隐藏溢出，就得配合 overflow-x: auto 和明确的 width，否则可能撑破布局。
-
inline-flex的宽度永远是“最小内容宽度”，不是“可用宽度” - 加
min-width可以兜底，但不会阻止它变宽 - 想让它“最多占满父宽”，得额外加
width: 100%+box-sizing: border-box，但这已偏离其设计本意
选哪个？看容器在文档流里该怎么“站位”
别纠结子项怎么排，先问自己：这个容器本身要不要和其他元素挤在同一行？要不要被文字包裹？要不要响应父容器的宽度限制？答案决定用哪个。
一个硬判断标准：display: flex 容器可以当页面骨架用，display: inline-flex 容器只能当“插件”用——它天生不适合做大区域布局，也扛不住复杂嵌套的块级流。
- 把
span改成display: inline-flex很安全；改成display: flex就可能破坏行高或换行 - 按钮组用
inline-flex，整个操作区用flex - React/Vue 组件中，对外暴露的 wrapper 类名建议明确区分
container-flex和container-inline-flex，避免使用者误用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
