本文详解如何通过调整 section 的 Flex 布局方向（flex-flow: column），使“Esportes”和“Economia”两个 H2 标题自然居于各自内容区块上方，解决因默认行内布局导致的标题错位问题。
本文详解如何通过调整 `section` 的 flex 布局方向（`flex-flow: column`），使“esportes”和“economia”两个 h2 标题自然居于各自内容区块上方，解决因默认行内布局导致的标题错位问题。
在构建新闻门户类网页时，语义化结构与视觉层级同样重要。H2 元素本就承担着“栏目主标题”的语义职责，但若其父容器（如 <section>）采用默认的 flex-direction: row（即水平排列），H2 会与其他子元素（如 .sport 或 .economy 容器）并排显示，导致标题无法垂直居顶、视觉逻辑断裂。
核心修复方案：将 section 设为垂直流式布局
只需三行关键 CSS 修改，即可实现标题“统领全局”的视觉效果：
section {
display: flex;
flex-flow: column nowrap; /* ✅ 关键：强制垂直排列 */
justify-content: space-evenly;
}同时，为保持内容区块（.sport 和 .economy）与标题之间的合理间距，建议统一添加 margin-top：
.sport,
.economy {
margin-top: 20px; /* ✅ 标题与内容间留白，提升可读性 */
}⚠️ 注意事项：
- 原代码中 <h2> 被错误嵌套在 .sport 内部（即 <div class="sport"><h2>Esportes</h2><article>...</article></div>），这破坏了语义结构——H2 应作为 <section> 的直接子元素，用以定义该节内容的主题；
- 正确结构应为：<section><h2>Esportes</h2><div class="sport">...</div></section>，确保 HTML 语义清晰、SEO 友好且无障碍访问支持更佳；
- 移除 .sport 和 .economy 上冗余的 position: relative 和 display: flex（除非需内部微调），避免与外层 section 的 flex 布局产生冲突。
优化后的 HTML 片段（关键结构调整）：
立即学习“前端免费学习笔记（深入）”；
<section>
<h2>Esportes</h2> <!-- ✅ 作为 section 直接子元素 -->
<div class="sport">
<article>...</article>
<article>...</article>
</div>
</section>
<section>
<h2>Economia</h2> <!-- ✅ 同上 -->
<div class="economy">
<article>...</article>
<article>...</article>
</div>
</section>最终效果：每个 <section> 内，H2 标题稳居顶部中央区域，下方内容区块整齐垂直排列，既符合 Web 标准，又具备响应式扩展基础。此方法无需 JavaScript、不依赖绝对定位，纯 CSS 即可实现稳健、可维护的栏目标题布局。
