flex 容器会自动将连续的文本节点包裹为匿名块级 Flex 项，因此无需显式包裹标签即可应用 align-items 等布局属性；但这种隐式行为存在兼容性与可维护性风险，强烈建议始终使用明确的 HTML 元素作为 Flex 项。

flex 容器会自动将连续的文本节点包裹为匿名块级 flex 项，因此无需显式包裹标签即可应用 `align-items` 等布局属性；但这种隐式行为存在兼容性与可维护性风险，强烈建议始终使用明确的 html 元素作为 flex 项。

在使用 Flexbox 进行垂直居中时，你可能会惊讶地发现：即使

中的文本没有被任何 HTML 标签包裹，align-items: center 依然生效。这并非浏览器“特例”，而是 CSS Flexbox 规范明确定义的行为。

根据 CSS Flexible Box Layout Module Level 1 规范：

Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item.

也就是说，当 Flex 容器（如 .header）内存在纯文本（或多个连续文本节点），浏览器会自动创建一个不可见的、匿名的块级容器（anonymous block container），并将这些文本包裹其中——该匿名容器即成为真正的 Flex 项，并参与 Flex 布局计算。

✅ 正确理解示例：

<div class="header">   My awesome website </div>

等价于（逻辑上，非 dom 中真实存在）：

<div class="header">   <div style="display: block;">My awesome website</div> </div>

因此 align-items: center 实际作用于这个隐式生成的匿名块，实现垂直居中。

⚠️ 但需警惕隐式行为带来的问题：

• 混合内容破坏布局一致性：
  当文本中嵌入内联元素（如 、）时，匿名块仅包裹「连续文本片段」，导致多个匿名项产生，破坏预期对齐：

  <div class="header">   Hello <strong>World</strong>! </div>

  此时会被拆分为 3 个 Flex 项：[text:”Hello “] → [] → [text:”!”]，align-items: center 对每个项独立生效，但因基线/盒模型差异，视觉上可能错位。

• 无法设置样式或交互：
  匿名块不可选中、无 DOM 节点、无法添加 class、无法绑定事件、无法用 CSS 伪类（如 ::first-line）精确控制。

• 可维护性差 & 意图不明确：
  依赖浏览器自动补全，违背“显式优于隐式”的工程原则，团队协作与长期维护成本升高。

✅ 最佳实践：始终显式包裹内容

<!-- 推荐：语义清晰、可控性强、符合规范 --> <div class="header">   <div class="header-title">My awesome website</div> </div>

.header {   display: flex;   align-items: center;   height: 72px;   /* ... 其他样式 */ }  .header-title {   margin: 0; /* 重置默认 margin */   font-size: 32px;   font-weight: 900; }

? 补充说明：

• 匿名块的 display 类型为 block（非 inline），因此它会独占一行并响应 align-items；
• 若容器内同时存在元素节点和文本节点（如
  TextSpan

  ），文本仍会被匿名包裹，而 是显式 Flex 项——二者同级并存；

• 此机制仅适用于「in-flow」子节点（即未设置 position: absolute/fixed 或 Float 的内容）。

总结：Flexbox 的匿名块机制是规范赋予的便利特性，但生产环境应主动规避其不确定性。用一个轻量