本文详解如何通过 CSS 控制元素垂直布局，解决因全局 display: flex 导致的标题与列表横向排列问题，并提供可复用的语义化解决方案。
本文详解如何通过 css 控制元素垂直布局，解决因全局 `display: flex` 导致的标题与列表横向排列问题，并提供可复用的语义化解决方案。
在您的项目中，.container 类被统一设置为 display: flex（见 CSS 中 header .container, section .container 的声明），这使得其所有直接子元素（如 <h1> 和 <ul class="brands">）默认沿主轴（水平方向）并排排列——这正是标题“Trabalhamos com as seguintes plataformas:”出现在徽标左侧而非上方的根本原因。
虽然您尝试过 flex-direction: column，但该属性需作用于父容器（即 .container），且必须配合 align-items/justify-content 调整对齐方式。然而，更合理、更可控的做法是避免“一刀切”的 flex 布局覆盖：全局 display: flex 适用于导航栏等需要横向对齐的场景，但不适用于内容区中自然流式布局（标题 + 列表）的需求。
✅ 推荐解决方案：为特定容器添加语义化修饰类（如 .no-flex），精准解除 flex 行为：
/* 在 CSS 中新增 */
.container.no-flex {
display: block; /* 恢复标准文档流，h1 自动块级独占一行 */
}对应 HTML 修改（仅影响 #plataformas 区域）：
<section id="plataformas">
<div class="container no-flex">
<h1>Trabalhamos com as seguintes plataformas:</h1>
<ul class="brands">
<li><img src="./midia/psx.svg" alt="Logo Playstation"></li>
<!-- 其他 logo... -->
</ul>
</div>
</section>⚠️ 注意事项：
- 不要滥用 !important 或重置整个 .container 的 display（会影响其他区域）；
- 避免给 <h1> 单独设 display: block——它本就是块级元素，问题根源在父容器的 flex 布局；
- 若未来需在此区域实现响应式徽标网格（如多行排列），可在 .brands 上启用 display: flex 并配合 flex-wrap: wrap，与标题保持垂直流式结构；
- 更进阶方案：使用 CSS Grid 替代部分 flex 场景（例如 section#plataformas .container { display: grid; grid-template-rows: auto 1fr; }），但对初学者而言，block 方案更直观、易维护。
总结：布局问题的本质常在于父容器的显示模式，而非子元素本身。理解 display 的继承性与作用域，善用修饰类解耦样式逻辑，是构建可维护前端结构的关键第一步。
