本文详解如何通过禁用 Flex 布局，使 <h1> 标题自然流式排列在品牌图标列表上方，解决初学者常见的“标题与内容横向并排”布局问题。
本文详解如何通过禁用 flex 布局，使 `
` 标题自然流式排列在品牌图标列表上方，解决初学者常见的“标题与内容横向并排”布局问题。
你遇到的问题非常典型：在 <section id="plataformas"> 中，<h1> 和 <ul class="brands"> 始终并排显示，而不是期望的「标题在上、图标在下」——其根本原因在于全局 .container 类被设置了 display: flex，且该样式同时作用于 <header> 和 <section> 内的所有容器，导致子元素默认沿主轴（水平方向）排列。
虽然你尝试过 flex-direction: column 或 display: block，但这些修改未生效，是因为：
- h1 { display: block } 是浏览器默认行为，无法覆盖父容器的 flex 布局约束；
- flex-direction: column 确实能让子元素垂直排列，但需在父容器（即 .container）上设置，而你当前的 CSS 中，.container 在 section 下仍继承了 flex 及 justify-content: space-between，这会强制两个子元素（<h1> 和 <ul>）被拉向两端，即使设为 column，也会因 justify-content 干扰导致布局异常。
✅ 正确解法是：为特定场景解除 Flex 布局，回归标准文档流（normal flow）。推荐做法如下：
✅ 推荐方案：为平台区域添加专用容器类
为 <section id="plataformas"> 中的 .container 添加一个修饰类（如 no-flex），并在 CSS 中单独重置其显示模式：
/* 新增规则：仅对需要垂直堆叠的容器禁用 flex */
.container.no-flex {
display: block; /* 彻底退出 flex 上下文 */
max-width: 1280px;
width: 100%;
margin: 0 auto;
padding: 0; /* 可选：避免额外内边距干扰 */
}对应 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>? 为什么这个方案更优？
- 不破坏其他区域（如 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；
- 图标 <li> 当前使用 inline-block，在块级容器中会自然换行堆叠；若需控制每行数量，建议改用 display: flex; flex-wrap: wrap + gap（现代方案）或 inline-block + text-align 组合。
✅ 最终效果验证
应用上述修改后，<h1> 将作为普通块级元素占据整行宽度，<ul> 紧随其后，所有图标按 inline-block 规则从左到右、自动换行排列，完全符合“标题在上、图标在下”的设计预期。
掌握「何时启用 Flex、何时回归文档流」，是 CSS 布局进阶的关键一步——灵活切换布局模式，比强行用 Flex 解决所有问题更重要。
