本文详解为何 <h1> 会与徽标并排显示、如何通过禁用 Flex 布局恢复标准文档流，并提供语义清晰、可维护的 CSS 解决方案。
本文详解为何 `
` 会与徽标并排显示、如何通过禁用 flex 布局恢复标准文档流，并提供语义清晰、可维护的 css 解决方案。
你遇到的问题根源在于：全局为 .container 设置了 display: flex，导致其所有子元素（包括 <h1> 和 <ul class="brands">）默认沿主轴（水平方向）排列。即使你给 <h1> 设置 display: block，它仍受限于父容器的 Flex 上下文——在 Flex 容器中，display: block 不会改变其参与 Flex 排列的行为。
? 问题定位：Flex 布局的“隐形约束”
当前 CSS 中这段代码是关键：
header .container,
section .container {
display: flex;
align-items: center;
justify-content: space-between;
}它让所有 .container（包括 #plataformas 内的容器）强制启用 Flex 布局。而 <h1> 和 <ul> 作为同级子元素，在 flex-direction: row（默认值）下自然水平排列，而非你期望的「标题在上、徽标在下」的块级流式布局。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
✅ 正确解法：为特定容器解除 Flex 约束
不推荐直接修改全局 .container 规则（会影响其他区域），而应精准覆盖。最佳实践是添加语义化修饰类（如 no-flex 或更明确的 stacked）：
/* 仅对需要垂直堆叠的容器停用 Flex */
.container.no-flex {
display: block; /* 恢复标准文档流 */
/* 可选：重置因 flex 引入的其他影响 */
align-items: normal;
justify-content: normal;
}对应 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>
<!-- 其他徽标... -->
</ul>
</div>
</section>?️ 进阶优化建议（提升可维护性）
- 避免全局 Flex 覆盖：将 display: flex 从 section .container 移至更具体的上下文（如 header .container, .hero-container），避免副作用。
- 使用现代布局替代方案：若未来需更复杂对齐，可用 display: grid 配合 grid-template-rows 显式定义标题+徽标区域。
-
徽标列表增强可访问性：
.brands { list-style: none; padding: 0; margin: 16px 0 0; /* 标题下方留白 */ } .brands li { display: inline-block; margin-right: 14px; margin-bottom: 14px; vertical-align: middle; /* 对齐基线，避免文字悬挂 */ }
⚠️ 注意事项
- flex-direction: column 在当前结构下无效，因为它是作用于容器自身的轴向设置，但你的 <h1> 和 <ul> 是兄弟元素，不是同一 Flex 容器内的直接子项——它们本身并未被包裹进新的 Flex 容器中。
- 直接给 <h1> 加 width: 100% 或 float: left 属于过时方案，且易引发清除浮动等额外问题，违背现代 CSS 原则。
通过为特定容器解除 Flex 约束，你既保持了原有布局的稳定性，又精准实现了标题居上、徽标居下的设计意图——这是初学者掌握「布局上下文」概念的关键一步。
