当使用 display: flex 布局时，默认 flex-direction: row 会使子元素水平排列；若需垂直堆叠（即自然换行效果），必须显式设置 flex-direction: column。
当使用 `display: flex` 布局时，默认 `flex-direction: row` 会使子元素水平排列；若需垂直堆叠（即自然换行效果），必须显式设置 `flex-direction: column`。
在 HTML 中，块级元素（如 <section></section>、<div>、<code><h1></h1>、<p></p>）本应默认独占一行、自上而下流式排列。但一旦父容器设置了 display: flex，其子元素便成为弹性项目（flex items），不再遵循普通文档流规则——此时它们的排列方向由 flex-direction 决定。
你当前的 CSS 中：
.word {
display: flex;
/* 缺少 flex-direction，浏览器按默认值 row 处理 */
justify-content: center;
align-items: center;
}这导致 <div class="heading"> 和 <code><section class="WordCard"></section> 被强制并排显示在同一行（即使内容本身是块级元素），视觉上就像“不换行”。
✅ 正确做法是添加 flex-direction: column，让子元素沿主轴（垂直方向）依次排列：
立即学习“前端免费学习笔记（深入）”；
.word {
color: white;
position: relative;
top: 150px;
display: flex;
flex-direction: column; /* ← 关键修复：启用垂直布局 */
justify-content: center;
align-items: center;
/* 移除 white-space: wrap（该属性对 flex 容器无效，且仅作用于内联元素） */
}⚠️ 注意事项：
-
white-space: wrap在你的原始 CSS 中属于误用：它仅控制容器内文本的换行行为，对 flex 布局的子元素排列无影响，且不应写在*或.word这类通用/布局容器上； - 若后续需为
.heading和.WordCard添加间距，推荐使用gap属性（现代、简洁）而非margin：.word { gap: 2rem; /* 在两个 flex 子项间插入统一间距 */ } - 如需响应式适配，可在小屏幕下保留
column，大屏切换为row，配合媒体查询即可。
总结：Flex 布局中，“换行”本质是改变主轴方向。牢记 flex-direction: column 是实现垂直堆叠、还原预期文档流表现的核心指令。
