本文详解为何 会与品牌 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 的 ⚠️ 注意：仅给 ✅ 正确解法是：为特定场景“解除” .container 的 flex 布局，恢复标准文档流（normal flow）。推荐做法是添加一个语义清晰的修饰类（如 .no-flex），精准覆盖： 然后在 HTML 中为平台区域的容器单独启用该类： 这样，.container.no-flex 内部就回归了标准块级流： ? 进阶建议： 掌握「谁控制布局？是父容器，不是子元素」这一核心原则，将帮你快速定位并解决绝大多数 Flex 相关布局问题。 和
被当作两个并排的 flex 项目（flex items），默认沿主轴（flex-direction: row）排列——这就是标题始终出现在 Logo 左侧、而非上方的根本原因。
设置 display: block 是无效的，因为 display 属性控制的是该元素自身在其父容器中的表现形式，而它的父容器（.container）仍在以 flex 模式强行将子元素横向排列。类似地，flex-direction: column 若只加在
上也无意义——它必须作用于父容器（即 .container） 才能改变子项排列方向。
.container.no-flex {
display: block; /* 或 display: contents;（更轻量，但兼容性略低） */
}
<section id="plataformas"><div class="container no-flex">
<h1>Trabalhamos com as seguintes plataformas:</h1>
<ul class="brands">
<li>@@##@@</li>
<li>@@##@@</li>
<!-- 其他 logo... -->
</ul>
</div>
</section>
作为块级元素独占一行，
紧随其后自动换行显示在下方，完全符合预期。
和 .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; /* 减小间距提升紧凑感 */
}
