本文详解为何 <h1> 会与品牌 Logo 并排显示，以及如何通过覆盖 .container 的 display: flex 行为，使标题自然流式布局在列表上方。
本文详解为何 `
` 会与品牌 logo 并排显示，以及如何通过覆盖 `.container` 的 `display: flex` 行为，使标题自然流式布局在列表上方。
你遇到的问题非常典型——初学者在使用 CSS Flexbox 时容易忽略「父容器全局样式对所有子元素的统一影响」。在你的代码中，.container 类被统一设置为 display: flex（见 CSS 第 25 行）：
header .container,
section .container {
display: flex;
align-items: center;
justify-content: space-between;
}这意味着所有使用 .container 的 <div>（包括 #plataformas 中的容器）都会强制启用水平弹性布局。因此，<h1> 和 <ul class="brands"> 被当作两个并排的 flex 项目（flex items），默认沿主轴（flex-direction: row）排列——这就是标题始终出现在 Logo 左侧、而非上方的根本原因。
⚠️ 注意：仅给 <h1> 设置 display: block 是无效的，因为 display 属性控制的是该元素自身在其父容器中的表现形式，而它的父容器（.container）仍在以 flex 模式强行将子元素横向排列。类似地，flex-direction: column 若只加在 <h1> 上也无意义——它必须作用于父容器（即 .container） 才能改变子项排列方向。
✅ 正确解法是：为特定场景“解除” .container 的 flex 布局，恢复标准文档流（normal flow）。推荐做法是添加一个语义清晰的修饰类（如 .no-flex），精准覆盖：
.container.no-flex {
display: block; /* 或 display: contents;（更轻量，但兼容性略低） */
}然后在 HTML 中为平台区域的容器单独启用该类：
<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>
<li><img src="./midia/ps2.svg" alt="Logo Playstation 2"></li>
<!-- 其他 logo... -->
</ul>
</div>
</section>这样，.container.no-flex 内部就回归了标准块级流：<h1> 作为块级元素独占一行，<ul> 紧随其后自动换行显示在下方，完全符合预期。
? 进阶建议：
- 若未来需在该区域实现更精细控制（如居中标题、Logo 水平居中等），可在 .no-flex 容器内对 <h1> 和 .brands 单独设置样式，例如：
.container.no-flex h1 { text-align: center; margin-bottom: 24px; } .container.no-flex .brands { text-align: center; padding: 0; } .container.no-flex .brands li { display: inline-block; margin: 0 8px; /* 减小间距提升紧凑感 */ } - 避免滥用全局 .container 样式。更健壮的做法是按模块定义专属容器类（如 .header-container, .content-container, .brands-container），各司其职，降低样式冲突风险。
掌握「谁控制布局？是父容器，不是子元素」这一核心原则，将帮你快速定位并解决绝大多数 Flex 相关布局问题。
