Flexbox verschiedene Größe childs

Question

Ich lerne Flexbox und ich habe eine erste Frage, wie man ein solches Layout von Spalten wie auf dem Bild machen? [ MyCodeFiddle ](http://jsfiddle.net/1s3bo913/)

layout project

Answer 1

Sie können Nest Flexbox Behälter:

• Ein Außenbehälter A, display: flex; flex-direction: column;
• Innerhalb von, dass zwei Behälter B1 und B2, die beide display: flex; flex-direction: row;
• Innen der erste von diesen (B1) zwei Behältern B1a und B1b
• B1b sollte wieder display: flex; flex-direction: column; haben und zwei DIVs oder Bilder (die Beeren Bilder)
• Innerhalb B2 zwei reguläre DIVs enthalten (kein Flexbox)

Answer 2

Sie können eine column für die 2 vertikalen .small-box es erstellen und flex: wrap auf dem Elternteil. Ich habe die Breiten so angepasst, dass sie den Dimensionen des übergeordneten Elements entsprechen.

.flex-container { 
 
    display: flex; 
 
    width: 500px; 
 
    height: 400px; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex-container, .flex-col { 
 
    display: flex; 
 
} 
 

 
.flex-col { 
 
    flex-direction: column; 
 
} 
 

 
.large-box { 
 
    width: 300px; 
 
    height: 200px; 
 
    background: blue; 
 
} 
 

 
.small-box { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: yellow; 
 
} 
 

 
.medium-box { 
 
    width: 250px; 
 
    height: 200px; 
 
    background: red; 
 
}

<div class="flex-container"> 
 
    <div class="large-box"> 
 
    </div> 
 
    <div class="flex-col"> 
 
    <div class="small-box"> 
 
    </div> 
 
    <div class="small-box"> 
 
    </div> 
 
    </div> 
 
    <div class="medium-box"> 
 
    </div> 
 
    <div class="medium-box"> 
 
    </div> 
 
</div>