Flex 容器会自动将连续的文本节点包裹为匿名块级 Flex 项，因此无需显式包裹标签即可应用 align-items 等布局属性；但这种隐式行为存在兼容性与可维护性风险，强烈建议始终使用明确的 HTML 元素作为 Flex 项。
flex 容器会自动将连续的文本节点包裹为匿名块级 flex 项，因此无需显式包裹标签即可应用 `align-items` 等布局属性；但这种隐式行为存在兼容性与可维护性风险，强烈建议始终使用明确的 html 元素作为 flex 项。
在使用 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 的匿名块机制是规范赋予的便利特性，但生产环境应主动规避其不确定性。用一个轻量
