本文详解如何通过合理嵌套 flexbox 容器与语义化 html 结构，将标题文本置于顶部、多个同尺寸色块水平并排显示在其正下方，避免 dom 嵌套错位导致的布局异常。
本文详解如何通过合理嵌套 flexbox 容器与语义化 html 结构，将标题文本置于顶部、多个同尺寸色块水平并排显示在其正下方，避免 dom 嵌套错位导致的布局异常。
在当前代码中，问题根源在于 .text5 同时承载了文本内容和四个蓝色方块，且其父容器 .container2 使用 flex-direction: row（横向主轴），导致所有子元素（包括文本和方块）被强制排列在同一行——这正是方块“跑上去”与文字并排的原因。
正确解法是分离关注点：让文本独占一行，方块在下一行水平排列。核心策略是：
- 为 .text5 设置 display: flex + flex-direction: column（或保持默认 column），使其成为垂直主轴的 Flex 容器；
-
将文本包裹在
或
等语义化标签中，并设 width: 100%
，确保它独占整行宽度； - 对四个方块统一设置 margin-top: 1rem 等间距控制，提升可读性；
- 移除 .container2 中不必要的 flex-direction: row（因其子元素仅有一个 .text5，无需横向排列）。
以下是优化后的完整代码：
<div class="container2">
<div class="text5">
<p>Some random information.</p>
<div class="box1" id="box1"></div>
<div class="box2" id="box2"></div>
<div class="box3" id="box3"></div>
<div class="box4" id="box4"></div>
</div>
</div>
.container2 {
height: 45vh;
background-color: white;
position: relative;
padding-top: 30px;
display: flex;
justify-content: center; /* 水平居中整个 .text5 */
align-items: flex-start; /* 防止垂直居中导致顶部留白异常 */
}
.text5 {
font-size: 36px;
font-weight: 800;
display: flex;
flex-direction: column;
align-items: center; /* 使内部方块整体水平居中 */
gap: 16px; /* 推荐使用 gap 替代 margin，更简洁可靠 */
}
.text5 p {
margin: 0; /* 重置默认段落外边距 */
width: 100%;
text-align: center; /* 可选：使文字也居中 */
}
#box1, #box2, #box3, #box4 {
border: 2px solid #3882F6;
height: 50px;
width: 50px;
flex-shrink: 0; /* 防止在小屏下被压缩 */
}
✅ 关键注意事项：
- 不要将非文本元素（如 div 方块）直接写在段落级文本容器内（如 文本），这违反 HTML 内容模型，易引发渲染不可预测行为；...
- 优先使用 gap 而非 margin 控制 Flex 子项间距，语义更清晰、兼容性良好（现代浏览器均支持）；
- 若需响应式适配，可在小屏下为 .text5 添加 flex-direction: column（已默认满足）并调整 gap 或 font-size 即可。
该方案结构清晰、语义正确、易于维护，是现代 CSS 布局的最佳实践之一。
