inline-flex容器不撑满父宽因其是inline-level元素，宽度由内容决定，不响应父容器宽度；需显式设置width:100%或max-width:100%并注意vertical-align等行内特性。
display: inline-flex 容器为什么不会撑满父宽
因为 inline-flex 的外层显示类型是 inline-level，不是 block-level。它像 <img> 或 <span> 一样，宽度默认由内容决定，不响应父容器的可用宽度——哪怕父容器有 width: 100%，它也只取“最小内容宽度”（min-content width）。
常见错误是给 inline-flex 容器设 width: 100% 却发现没效果：这不是 bug，而是 inline-level 元素对百分比宽度的解析逻辑不同。只有当容器参与的是块级格式化上下文（BFC）且具有明确的包含块宽度时，width: 100% 才有意义；而 inline-flex 默认不触发 BFC，也不自动获得包含块宽度。
- 想让它“最多占满父宽”，得显式加
width: 100%+box-sizing: border-box，但要注意这会破坏其 inline 行为的自然性 - 更稳妥的做法是用
max-width: 100%配合min-width控制收缩底线 - 如果父容器是
display: inline（比如<span>），直接套inline-flex是安全的；但套flex就会报错或导致布局断裂
多个 inline-flex 容器并排时出现意外间隙
这不是 flex 布局的问题，是 HTML 文本节点的空格字符在行内流中被渲染成空白符所致——和 inline-block 完全一致。
典型现象：两个 inline-flex 容器写成换行格式，中间多出约 4px 间隙；或者它们和旁边的文本不对齐。
立即学习“前端免费学习笔记（深入）”；
- 解决方法一：在父容器上设
font-size: 0，子容器里再重置font-size - 解决方法二：用 HTML 注释删掉元素间的空白，如
<div class="a"></div><!-- --><div class="b"></div> - 解决方法三：改用
flex容器包一层，再用justify-content: space-between等控制子项间距——但这已脱离“行内嵌入”初衷
flex: 1 子项在 inline-flex 里不伸展
因为 flex: 1 分配的是主轴上的“剩余空间”，而 inline-flex 容器默认没有预设主轴长度。它的宽度是内容驱动的，不是父容器驱动的——所以没有“剩余”可言。
例如：一个 inline-flex 里放一个 div 并设 flex: 1，它不会撑开容器；但同样结构换成 flex 容器，它就会填满整行。
- 要让子项伸展，必须先锚定容器宽度：加
width: 100%、min-width: 200px，或用flex-basis显式指定基础尺寸 -
flex-wrap: nowrap下，inline-flex容器会随子项变宽，甚至横向溢出——这点比flex更“危险”，容易撑破布局 - 若需滚动式标签栏，
inline-flex+overflow-x: auto是自然选择；但别忘了加width或max-width限制，否则它可能无限延伸
vertical-align 对 inline-flex 有效但对 flex 无效
vertical-align 只作用于 inline-level 和 table-cell 元素。flex 是 block-level，所以该属性完全被忽略；而 inline-flex 是 inline-level，因此 vertical-align: middle 能让它和文字、图标垂直居中对齐。
这是最常被忽略的兼容点：当你把按钮组从 flex 改成 inline-flex 后，发现它们突然“下沉”了，大概率是因为没同步补上 vertical-align: middle。
- 注意
vertical-align的基准线是父行盒（line box）的 baseline，不是父容器的中心 - 若父容器是
font-size: 0，baseline 位置会漂移，此时建议改用vertical-align: top或bottom避免不确定性 - 不要指望
align-items在inline-flex外部起作用——它只管子项在交叉轴的对齐，不管容器自身怎么挂靠在行流里
实际开发中最容易被忽略的，是 inline-flex 容器的宽度始终是“内容推导型”，而不是“父级约束型”。哪怕你写了 width: 100%，只要它所处的上下文不是块级格式化上下文，这个值就可能失效。这种隐式依赖，比 flex 的行为更难调试。
