CSS per una colonna, due righe con fratelli con FlexBox

Question

questo modo più semplice che ho trovato per spiegare questo è semplicemente quello di mostrare la bandiera del Benin:

Mi piacerebbe fare qualcosa di simile con flexbox in CSS, ma finora sono stato sconcertato.

La chiave è che ho bisogno di ciascuna delle tre regioni di essere fratelli, qualcosa di simile:

<div class=flag> 
    <div class=green></div> 
    <div class=yellow></div> 
    <div class=red></div> 
</div> 

.flag { 
    display:flex; 
    flex-direction: row; 
} 

/* below this I'm not sure */ 
.green { 

} 

.red, .yellow { 

} 

Questo è possibile senza l'aggiunta di un nodo intermediario per contenere .red e .yellow? È facile a quel punto, ma mi piacerebbe sapere se è possibile fare ciò che descrivo sopra.

Answer 1

È possibile utilizzare le colonne di avvolgimento per ottenere la vostra Benin Bandiera:

La prima colonna (a sinistra) è .green a height:100% rispetto al contenitore .flag.

La seconda colonna (a destra) è .yellow, .red a height:50% rispetto al .flag

E la .green è allocato width:40% rispetto al .flag

Buona fortuna con il vostro progetto!

.flag{ 
 
    position:relative; 
 
    display:flex; 
 
    flex-flow:column wrap; 
 
    width:200px; 
 
    height:150px; 
 
    border:2px solid black; 
 
} 
 

 
.green{background:green;} 
 
.yellow{background:yellow;} 
 
.red{background:red;} 
 

 
.col1{width:40%;height:100%;} 
 
.col2{width:60%;height:50%;}

<div class=flag> 
 
    <div class='col1 green'></div> 
 
    <div class='col2 yellow'></div> 
 
    <div class='col2 red'></div> 
 
</div>