html - 使用 flex 盒。导航栏损坏的网站

Question

我正在使用 HTML5 构建一个基本站点并使用 FlexBox。正如你在这里看到的:

“What does WWF”文本位于导航栏 ul 和 <aside> 之间元素。我希望它直接位于导航栏下方。我该如何解决这个问题？

相关代码片段:

.flex {
  display: flex;
  justify-content: space-between;
}

<div id="wrapper">
  <header style="height: 150px">
    <img src="placeholdr">
  </header>
  <nav>
    <ul>
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>School</a></li>
      <li><a>Workplace</a></li>
      <li><a>Girlfriend</a></li>
    </ul>
  </nav>
  <div class="flex">
    <section id="content">
      <article>
        <header>
          <h1>What Does WWF Do?</h1>
          <p>WWF's mission:</p>
        </header>
        <p>the text</p>
        <p>text</p>
      </article>
    </section>
    <aside>
      <img src="placeholdrr">
    </aside>
  </div>
  <footer>
    <div class="footer">
    </div>
  </footer>
</div>

Answer 1

如果您的“id="wrapper"”div 中的所有部分(直接子级)的宽度为 100%，它们自然会按照与您的 DOM 相同的顺序相互放置，例如

标题导航分区页脚

或者，您可以使用“flex-direction: column;”将您的“id="wrapper"”变成柔性显示