display: flex 创建块级弹性容器，独占一行、撑满父宽；inline-flex 创建行内弹性容器，宽度由内容决定、可与文字同行，二者子项布局规则相同。
display: flex 会让子元素脱离行内流，变成块级参与弹性布局
设置 display: flex 的是父容器，真正被改变行为的是它的**直接子元素**——无论这些子元素原本是 <span></span>、<a></a> 还是空 <div>，只要在 Flex 容器里，就自动成为 flex item，不再遵循行内元素的默认规则。
<p>常见错误现象：原本并排的 <code><span></span> 突然换行、上下 margin 失效、文字基线对齐错乱、vertical-align 不再起作用。
- 行内元素（如
<span></span>）在普通文档流中受white-space、line-height和兄弟元素影响；一旦成为 flex item，它们的尺寸、排列、对齐全部由 flex 属性控制 -
width和height在行内元素上原本无效，但在 flex item 上可以生效（尤其配合flex-basis或min-width） - 上下
margin在行内元素中不推挤其他元素，但在 flex item 中完全有效——这是最直观的行为切换点 - 如果子元素是替换元素（如
<img alt="为什么CSS中设置display: flex后行内元素行为会发生改变" >），它本就能设宽高；但设了display: flex后，它的对齐方式会从vertical-align: baseline切换为容器的align-items值
inline-flex 容器自身仍属行内级，所以 vertical-align 生效
很多人混淆了两层：父容器设 display: inline-flex，和它的子元素是否还是行内元素。前者决定**容器自己如何嵌入文本流**，后者决定**子元素如何在容器内排布**。
典型触发场景：多个 <button></button> 或自定义标签写在同一行，每个都用 display: inline-flex 包裹图标+文字，结果整体“下沉”或“浮动”。
立即学习“前端免费学习笔记（深入）”；
- 根本原因不是子项错位，而是
inline-flex容器本身是行内级盒子，浏览器按其行内盒基线（baseline）对齐——这个基线位置由内容高度动态计算，不固定 -
align-items: baseline对子项有用，但对容器在父行框里的锚点毫无影响 - 解决只需一行：
vertical-align: top或vertical-align: middle，显式切断基线依赖 - 不要靠改子元素字体大小去“调平”，那只是掩盖问题，且易因字号微调再次偏移
子元素是行内元素时，flex-shrink 默认为 1，容易被压缩变形
一个 <span></span> 放进 display: flex 容器后，虽然能设宽高，但它仍继承 min-width: auto 和 flex-shrink: 1 —— 这意味着只要容器空间不足，它就会被主动压窄，哪怕里面是图标或短标签。
常见错误现象：按钮里的 SVG 图标缩成一条线、<span>已读</span> 变成 …、文字强制换行破坏设计。
- 关键修复不是加
white-space: nowrap，而是关掉收缩：flex-shrink: 0 - 更稳妥写法是
flex: 0 0 auto或flex: 0 0 80px，显式锁定三个维度 - 若同时用了
flex: 1简写，它会覆盖后面写的flex-shrink: 0，必须检查 CSS 优先级 - 移动端尤其敏感：iOS Safari 对
flex: 1隐含的min-width: 0支持不稳定，建议始终显式写min-width: 0
动态插入行内元素时，需确保它是真实节点而非字符串
用 JS 往 display: flex 容器里 appendChild() 一个 <span></span>，结果看不见？大概率你 append 的是 HTML 字符串，不是 DOM 节点。
Flex 容器只识别真实的、已挂载的子节点为 flex item；字符串片段会被当作文本节点处理，不参与 flex 计算。
- 错误写法：
container.appendChild('<span>new</span>')→ 渲染为纯文本，无 flex 行为 - 正确写法：
const el = document.createElement('span'); el.textContent = 'new'; container.appendChild(el) - 若用
innerHTML +=，会触发重绘但丢失 flex 上下文，新内容不会自动成为 flex item - 动态添加后尺寸异常？立刻检查
getComputedStyle(el).flexBasis，别读offsetWidth（会强制 layout）
flex vs inline-flex）决定了它如何与外部共处，而子元素的 flex 属性决定了它如何在内部安放——这两层对齐逻辑必须分开看、分别控。
