flexbox grid unter zentriertem flex artikel

Question

Ich möchte ein Intro Abschnitt auf der linken Seite eines .container und eine Seitenleiste auf der rechten Seite.

Auf der linken Seite unter dem .intro Abschnitt möchte ich, dass es vier divs gleichmäßig verteilt wie ein Raster gibt.

Ich habe Probleme mit dem "Raster einrichten". Ich denke, ein Teil des Problems ist, dass der Elternteil ein Flexbox-Attribut hat, das die Kinder beeinflusst.

Voraussetzung: Das Intro Abschnitt sollte im .left-side und dem „Grid“ sollte nicht die Boxen zentriert zentriert werden sollte, so viel Platz wie nötig nehmen auf eine Zeile passen mit Rändern dazwischen. Die .intro sollte 80 Prozent der Breite der linken Seite betragen.

Ich möchte keine größeren Änderungen an der Struktur vornehmen, dies ist nur ein kleiner Ausschnitt davon, wie mein Projekt aufgebaut ist.

.container{ 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    display: flex; 
 
} 
 
.left-side{ 
 
    flex:8; 
 
    display: flex; 
 
    justify-content:center; 
 
    flex-wrap: wrap; 
 
} 
 
.side-bar{ 
 
    flex: 2; 
 
    height: 100vh; 
 
    background: powderblue; 
 

 

 
} 
 
.intro{ 
 
    flex:3; 
 
    width:80%; 
 
    height: 300px; 
 
    background: skyblue; 
 
} 
 

 
.box{ 
 
    background: red; 
 
    width: 45%; 
 
    height: 100px; 
 
    flex:4; 
 
    border:1px solid orange; 
 
}

<div class="container"> 
 
    <div class="left-side"> 
 
    <div class="intro"> 
 
     intro 
 
    </div> 
 
    <div class="recent"> 
 
     <div class="box">1</div> 
 
     <div class="box">2</div> 
 
     <div class="box">3</div> 
 
     <div class="box">4</div> 
 
    </div> 
 
    </div> 
 
    <div class="side-bar"> 
 
    sidebar 
 
    </div>

Answer 1

Flex Elemente können auch Flex-Container sein. Dadurch können Sie mehrere Container mit flex-direction: row oder column in einem größeren Container verschachteln.

Für Ihr Layout können Sie eine Spalte erstellen, die aus zwei Flex-Elementen besteht. Der erste Artikel (.intro) hat eine Breite von 80% und kann horizontal zentriert werden. Der zweite Gegenstand (.recent) kann ein flexibler Behälter mit vier Gegenständen sein, die in einem 2x2-Gitter angeordnet sind.

.container { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    justify-content: center; 
 
    height: 100vh; 
 
} 
 
.left-side { 
 
    flex: 4; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.side-bar { 
 
    flex: 1; 
 
    background: powderblue; 
 
} 
 
.intro { 
 
    flex: 3; 
 
    height: 300px; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    background: skyblue; 
 
} 
 
.recent { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    background-image: url("http://i.imgur.com/60PVLis.png"); 
 
    background-size: contain; 
 
} 
 
.box { 
 
    margin: 5px; 
 
    flex-basis: calc(50% - 10px); 
 
    height: 100px; 
 
    box-sizing: border-box; 
 
    background: red; 
 
} 
 

 
body { margin: 0; }

<div class="container"> 
 
    <div class="left-side"> 
 
     <div class="intro">intro</div> 
 
     <div class="recent"> 
 
      <div class="box">1</div> 
 
      <div class="box">2</div> 
 
      <div class="box">3</div> 
 
      <div class="box">4</div> 
 
     </div> 
 
    </div> 
 
    <div class="side-bar"> 
 
     sidebar 
 
    </div> 
 
</div>