核心区别在于容器显示类型：flex为块级容器，独占一行、默认撑满父宽；inline-flex为行内级容器，不换行、宽度由内容决定，适用于需嵌入文本流的UI单元如按钮组、图标标签等。
inline-flex 和 flex 的核心区别在哪
关键不是“能不能用”，而是“用在哪”。display: inline-flex 生成的是行内级弹性容器，它本身像 span 一样不独占一行，但它的子元素仍按 flex 规则排列；而 display: flex 是块级容器，天然换行、撑满父宽。
常见误用：给一个本该内联的按钮组或导航项套 display: flex，结果整个组被强行块化、换行，破坏了行内流式布局。
正确场景：inline-flex 适合封装一组需要内部对齐/等分/居中，又必须嵌入文本流的 UI 单元，比如带图标和文字的按钮、标签云、表单内联操作区。
inline-flex 下子元素的 float/clear/vertical-align 是否还生效
不生效。和 display: flex 一样，一旦设为 inline-flex，其直接子元素自动成为 flex 项目，以下属性会被忽略：
立即学习“前端免费学习笔记（深入）”；
-
float（包括left/right） clearvertical-align
如果你发现子元素没按预期对齐，别去调 vertical-align —— 改用 align-items 或 align-self。
注意：这个失效只作用于 inline-flex 容器的**直接子元素**，不影响容器自身在行内的基线对齐（它仍受父级 vertical-align 影响）。
inline-flex 容器的 width/height 行为是否和 block 不同
行为一致，但表现更“克制”：
-
width和height依然生效，但默认不撑满父容器宽度（因为它是行内级） - 若未显式设置
width，容器宽度由内容决定（类似inline-block） -
min-width/max-width同样起作用，可用于防止过度收缩 - 高度计算逻辑与
flex相同：若子项无固定高，align-items: stretch（默认）会让它们拉伸填满容器高度；设为flex-start则按内容高度收缩
典型坑：inline-flex 容器里放一个 flex: 1 的子项，它不会“撑开”容器宽度——因为 flex: 1 分配的是容器的**主轴剩余空间**，而 inline-flex 默认没有预设主轴长度，得靠 width 或 min-width 锚定基础尺寸。
兼容性与 fallback 方案怎么写才稳妥
现代浏览器（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+）已全面支持 inline-flex，但 IE10/11 仅部分支持（需加 -ms- 前缀），IE9 及以下完全不支持。
稳妥写法示例：
button.group {
display: -ms-inline-flexbox; /* IE10 */
display: inline-flex;
-ms-flex-align: center; /* IE10 对齐 */
align-items: center;
}fallback 建议（非必须，但对老项目）：
- 用
display: inline-block+ 手动 margin/padding 模拟对齐（失去弹性伸缩能力） - 避免依赖
flex-wrap: wrap—— inline-flex 容器换行后，行高可能错乱，不如直接切到flex+ 媒体查询 - 真要兼容 IE9，优先考虑结构降级，而非样式补丁
真正容易被忽略的点：inline-flex 容器的 line-height 不直接影响子项，但它会影响容器在文本流中的垂直定位；而子项的 margin-top/bottom 在主轴为 row 时无效（flex 项目间用 gap 或 justify-content 控制间距）。
