フレックスボックスの使用。ナビゲーションバーで壊れたサイト

Question

私はHTML5で基本的なサイトを構築しており、FlexBoxを使用しています。あなたがここに見ることができるように：

「何がWWFの」テキストがナビゲーションバーのULと<aside>要素との間で行います。私はそれをnavbarの真下にしたい。これをどうやって解決するのですか？

関連するコードスニペット：

.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:relativeを追加できるようにするには、メインnavにposition:absoluteスタイルを追加する必要があります。

基本的にposition:absoluteは、「メイン」タグがどこに配置されているかを言うため、何かに関連するようになります。多分これが助けになるでしょう。私はこれによ

は、少なくとも私は助けようとした：P

Answer 2

divの「ID = 『ラッパー』」あなたの内のすべてのセクション（直接の子）は、彼らが自然になり、100％の幅を持っている場合あなたのDOMと同じ順序でお互いの下に置かれます。

ヘッダ NAV のdiv フッター代わり

、あなたが持つフレックスディスプレイにあなたの 'idは= "ラッパー"' を作ることができる "フレックス方向：カラム;"