Aligning und Verschachtelung divs (CSS-Layout-Probleme)

Question

Ich möchte folgendes Layout erreichen:

Hier ist meine aktuelle HTML:

<div id="main"> 
    <div id="content1"> 
     <span>Content1</span> 
     <div id="text"> 
      <span>Text</span> 
     </div> 
     <div id="game"> 
      <span>Game</span> 
     </div> 
    </div> 
    <div id="content2"> 
     <span>Content2</span> 
     <div id="gallery"> 
      <span>Gallery</span> 
     </div> 
    </div> 
</div> 
<div id="footer"> 
    <span>Footer</span> 
</div> 

Der mittlere Teil in Haupt div enthalten ist. Der linke Teil ist Inhalt 1 und der rechte Teil ist Inhalt2. Content1 ist in zwei Teile (verschachtelte Divs) aufgeteilt. Ich bin stundenlang mit dieser einfachen Aufgabe zu kämpfen .. Dinge, die ich zu tun, mich versuche, aber Probleme, mit:

• ich diese Website will 100% des Browser nehmen Breite
• ich war in der Lage zu spalten content1 und content2 und passen Sie sie in die gleiche Zeile, aber wenn ich Grenzen hinzugefügt habe, konnte ich sie nicht mehr ausrichten (Ich versuchte Überlauf: versteckt ;, Anzeige: Inline-Block ;, und flex-Anzeige, aber irgendwie konnte ich es nicht zum Laufen bringen ..)
• Zentrieren Sie die Elemente in content2 (ist es genug, wenn ich margin: auto?) Ich frage mich auch, ob das HTML-Layout, das ich gepostet habe, OK ist, da ich nicht weiß, wie viel Nesting begrüßt? Oder wird Nist normalerweise für Container und dergleichen verwendet? Danke für die Hilfe

Answer 1

Sie können dies tun mit verschachtelten Flexbox

.content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
} 
 
.main { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.right { 
 
    flex: 1; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    border: 1px solid black; 
 
} 
 
.left { 
 
    display: flex; 
 
    border: 1px solid black; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 
.one { 
 
    flex: 2; 
 
} 
 
.two { 
 
    flex: 1; 
 
    border-top: 1px solid black; 
 
} 
 
header, 
 
footer { 
 
    background: lightblue; 
 
    height: 50px; 
 
}

<div class="content"> 
 
    <header>Header</header> 
 
    <div class="main"> 
 
    <div class="left"> 
 
     <div class="one">One</div> 
 
     <div class="two">Two</div> 
 
    </div> 
 
    <div class="right">Right</div> 
 
    </div> 
 
    <footer>Footer</footer> 
 
</div>