Verwenden von Flexbox. Seite defekt mit Navigationsleiste

Question

Ich erstelle eine einfache Site mit HTML5 und benutze FlexBox. Wie Sie hier sehen können:

das "Was bedeutet WWF" tun Text zwischen dem navbar ul und <aside> Element ist. Ich möchte, dass es direkt unter der Navigationsleiste ist. Wie behebe ich das?

Relevante Codeausschnitt:

.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

Sie sollten einen position:absolute Stil zu einem Haupt nav hinzufügen, so dass Sie ein position:relative hinzufügen kann, so kann es unter gehen.

Grundsätzlich wird die position:absolute sagen, wo ist das "Haupt" -Tag positioniert, so dass es relativ zu etwas sein kann. Vielleicht wird das helfen.

ich das bin, zumindest habe ich versucht zu helfen: p

Answer 2

Wenn alle Abschnitte (direkte Kinder) in Ihrem ‚id =‚Wrapper‘‘ div eine Breite von 100% haben werden sie natürlich sein in der gleichen Reihenfolge wie Ihr DOM, z

Kopf nav div Fußzeile

Alternativ können Sie Ihre 'id = "Wrapper"' machen in eine Flex-Display mit "Flex-Richtung: column;"