如何使文本置于flexbox下方？Odin Landing Page项目布局问题

• 检查HTML结构嵌套
  先确认<p>标签是否完全脱离flex容器的<div>。用浏览器开发者工具（F12）查看元素层级，确保<p>的父元素不是flex容器。比如错误结构是把<p>放在flex容器内部，正确结构应该将其移到容器外：
  错误示例：

  <div class="flex-container">
    <div>Flex Item</div>
    <p>本该在下方的文本</p>
  </div>
  

  正确示例：

  <div class="flex-container">
    <div>Flex Item</div>
  </div>
  <p>本该在下方的文本</p>
  

• 排查Flex容器的CSS属性

  • 检查flex容器是否设置了height: 100vh或min-height: 100vh，这类属性会让容器占满视口高度，导致文本被挤到容器视觉区域外，看起来像是在容器内部。
  • 确认容器没有设置position: relative，同时文本元素没有被错误添加position: absolute属性——绝对定位会让文本脱离正常文档流，被纳入容器的定位上下文。

• 修复示例
  假设你的原代码存在结构嵌套问题，调整后如下：
  HTML：

  <section class="info-section">
    <div class="flex-container">
      <div class="info-card">Card 1</div>
      <div class="info-card">Card 2</div>
      <div class="info-card">Card 3</div>
      <div class="info-card">Card 4</div>
    </div>
    <p>这段文本现在会正常显示在Flexbox下方</p>
  </section>
  

  CSS：

  .flex-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    /* 避免设置过度的高度属性 */
  }
  

内容的提问来源于stack exchange，提问作者Zeel