使用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

您应该在主nav添加一个position:absolute样式，以便您可以添加一个position:relative以便其下移。

基本上， position:absolute会说出“ main”标签的位置，以便它可以相对于某物。 也许这会有所帮助。

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

Answer 2

如果您的'id =“ wrapper”'div中的所有部分（直接子对象）的宽度均为100％，则它们自然会以与DOM相同的顺序相互放置，例如

页眉导航div页脚

或者，您可以使用“ flex-direction：column;”将您的'id =“ wrapper”'设置为Flex显示。