display: inline-flex 是行内弹性容器，宽度由内容决定、可与文字同行；display: flex 是块级弹性容器，独占一行、默认撑满父宽；二者子项布局规则相同，仅外部显示类型不同。
display: inline-flex 容器不占满父宽，但能和文字同行
根本原因在于容器自身的外部显示类型不同：display: flex 等价于 display: block flex，而 display: inline-flex 等价于 display: inline flex。前者是块级元素，天然换行、默认 width 为 100%；后者是行内元素，宽度只包裹内容，像 img 或 span 那样参与文本流。
常见错误现象：
- 给
display: inline-flex容器设width: 100%却没效果——因为它的外部行为是 inline，width默认不生效（除非显式设box-sizing: border-box并配合width） - 把
inline-flex放在span里，结果整个布局错乱——块级容器不能嵌在纯行内上下文中，但inline-flex可以 - 多个
inline-flex并排时出现意外间隙——其实是 HTML 中的空格字符被渲染成空白符，可用font-size: 0或注释删空格解决
flex-wrap: nowrap 下，inline-flex 容器会横向撑开而非截断
这是实际开发中最容易被忽略的差异点。当子项很多且不允许换行（flex-wrap: nowrap）时：
-
display: flex容器受父容器max-width或overflow约束，超出部分可能被隐藏或滚动 -
display: inline-flex容器宽度由子项总尺寸决定，它不会主动收缩，也不会被父容器的宽度限制“压扁”——它会突破父宽横向延伸
典型场景：做横向滚动标签栏，用 inline-flex 更自然；但若要限制宽度并隐藏溢出，必须显式加 width: 100% + overflow-x: auto，否则可能撑破布局。
立即学习“前端免费学习笔记（深入）”；
子元素的 float / vertical-align 在 inline-flex 里完全失效
一旦父容器设为 display: inline-flex（或 flex），其直接子元素就变成 flex item，以下属性全部被忽略：
-
float: left/float: right clear: bothvertical-align: middle
注意：这个失效仅针对子元素。容器自身仍受父级 vertical-align 影响（比如和文字对齐时，vertical-align: middle 对 inline-flex 容器本身有效）。
如果你发现子项没居中，别调 vertical-align——改用 align-items: center 或 justify-content: center。
inline-flex 里 flex: 1 的子项不会“自动撑宽”容器
因为 flex: 1 分配的是容器主轴上的“剩余空间”，而 inline-flex 默认没有预设主轴长度（不像 flex 那样默认占满父宽）。所以：
- 一个空的
inline-flex容器，里面放一个flex: 1的子项，它不会变宽 - 想让它响应式扩展，得先锚定基础尺寸：加
min-width: 0防止收缩，或width: 100%+box-sizing: border-box - 如果目标是“最多占满父宽”，那
inline-flex就不是最佳选择——直接用display: flex更可控
复杂点在于：容器的“内容宽度”和“可用宽度”是两回事，而 inline-flex 只认前者。开发者常误以为它能像 flex 那样“弹性伸缩”，其实它只是“内部弹性”，外部仍是固执的行内逻辑。
