` 标题自然流式排列在品牌图标列表上方，解决初学者常见的“标题与内容横向并排”布局问题。

你遇到的问题非常典型：在

中，

和
始终并排显示，而不是期望的「标题在上、图标在下」——其根本原因在于全局 .container 类被设置了 display: flex，且该样式同时作用于
和
内的所有容器，导致子元素默认沿主轴（水平方向）排列。

虽然你尝试过 flex-direction: column 或 display: block，但这些修改未生效，是因为：

h1 { display: block } 是浏览器默认行为，无法覆盖父容器的 flex 布局约束；
flex-direction: column 确实能让子元素垂直排列，但需在父容器（即 .container）上设置，而你当前的 CSS 中，.container 在 section 下仍继承了 flex 及 justify-content: space-between，这会强制两个子元素（
和

✅ 正确解法是：为特定场景解除 Flex 布局，回归标准文档流（normal flow）。推荐做法如下：

✅ 推荐方案：为平台区域添加专用容器类

为

中的 .container 添加一个修饰类（如 no-flex），并在 CSS 中单独重置其显示模式：

/* 新增规则：仅对需要垂直堆叠的容器禁用 flex */
.container.no-flex {
  display: block; /* 彻底退出 flex 上下文 */
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0; /* 可选：避免额外内边距干扰 */
}

对应 HTML 修改为：

Pictory

一款面向内容营销的视频制作工具，可将文章、脚本和长视频等内容转化为短视频，并提供剪辑、字幕等 AI 辅助能力。

下载

<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>

? 为什么这个方案更优？

不破坏其他区域（如 header/nav）的 Flex 布局逻辑；

语义清晰：no-flex 明确表达“此处不使用弹性布局”；

符合 CSS BEM 或 OOCSS 思想，便于维护和复用。

⚠️ 注意事项

避免直接修改全局 .container 的 display，否则会影响导航栏、首页图文等所有使用该类的区域；
若后续需对 .brands 列表做对齐优化（如居中、换行），可在 ul.brands 上单独设置 text-align: center 或 display: flex; flex-wrap: wrap; justify-content: center;，但前提是父容器已退出 flex；
图标
当前使用 inline-block，在块级容器中会自然换行堆叠；若需控制每行数量，建议改用 display: flex; flex-wrap: wrap + gap（现代方案）或 inline-block + text-align 组合。