使用Flexbox。网站已被导航栏

Question

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

“WWF是什么”文本在navbar 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

您应该向主position:absolute添加nav样式，以便添加position:relative以便它可以进入。

基本上position:absolute会说“主”标签位于何处，因此它可以相对于某些东西。也许这会有所帮助。

我对此，至少我试图帮助：p

Answer 2

如果您的＆＃39; id =＆＃34;包装内的所有部分（直接儿童）＆＃34;＆＃39; div的宽度为100％，它们自然会以与DOM相同的顺序放在彼此之下，例如

头 导航 DIV 页脚

或者，您可以制作＆＃39; id =＆＃34;包装＆＃34;＆＃39;使用＆＃34; flex-direction：列进行弹性显示;＆＃34;