display: flex是块级容器，独占一行、默认撑满父宽；inline-flex是行内容器，宽度由内容决定、可与文字同行，二者子项布局规则完全相同。
区别不在子元素怎么排，而在容器自己怎么“站”——display: flex是块级站位，display: inline-flex是行内站位。
容器自身在文档流中的行为不同
设了 display: flex 的元素，就像加了 display: block 一样：前后强制换行、默认占满父宽、可设 width/height、margin 四边都生效。它不care旁边有没有文字，直接独占一行。
而 display: inline-flex 的容器，本质是“带 Flex 能力的 inline-block”：它像 img 或 span 那样嵌在文本流里，可以和文字、图标、其他 inline-flex 容器并排；宽度由子项内容撑开，width: 100% 默认无效，vertical-align 对它自身有效（比如对齐文字基线）。
常见误判：看到按钮组没水平排开，第一反应去调 vertical-align ——其实该检查的是容器是不是被错误设成了 flex，导致它强行块化换行了。
子元素的布局规则完全一致，但某些属性失效范围有差异
无论 flex 还是 inline-flex，只要设了，它的**直接子元素**就变成 flex item，justify-content、align-items、flex-wrap 全部照常工作。
但以下属性对子元素**一律失效**：
-
float（包括float: left） clearvertical-align
注意：vertical-align 失效只针对子元素；容器自身仍受父级 vertical-align 影响——这点常被忽略，导致“为什么图标和文字对不齐”，其实是容器没设 vertical-align: middle。
宽度计算逻辑完全不同，直接影响溢出和换行
display: flex 容器的宽度默认是父容器的可用宽度（比如 100%），超出时会触发 overflow 或压缩子项。
display: inline-flex 容器的宽度永远是“最小内容宽度”（min-content）：
- 子项很多且
flex-wrap: nowrap时，它会横向无限延伸，可能撑破父容器 -
width: 100%不起作用，除非显式加box-sizing: border-box+width: 100% - 多个
inline-flex并排时，HTML 中的空格/换行会生成间隙，需用font-size: 0或注释消除
典型场景：做横向滚动标签栏，用 inline-flex 更自然；但若要限制宽度并隐藏溢出，必须配 overflow-x: auto 和明确的 width，否则布局容易失控。
选哪个？关键看容器要不要“融入文本流”
用 display: flex 当：
- 它是页面级结构（如导航栏、卡片列表、表单区域）
- 你需要它从新行开始、撑满父宽、当一个“块”来管理
- 父容器是块级（
div、section等），无嵌入文本流需求
用 display: inline-flex 当：
- 它是嵌入式小模块（如搜索框+按钮、带图标的标签、工具栏操作组）
- 它需要和文字同行、不打断行流、宽度随内容变化
- 你要控制它自身在行内的对齐（比如
vertical-align: middle）
最易被忽略的复杂点：inline-flex 容器的宽度不是“可用宽度”，而是“内容撑出来的最小宽度”，且无法靠 width: 100% 自动适配——这个反直觉行为，在响应式断点切换或动态增删子项时最容易引发布局错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
