/ / CSS per una colonna, due file con fratelli con flexbox (come la bandiera del Benin!) - css, flexbox

CSS per una colonna, due file con fratelli con flexbox (come la bandiera del Benin!) - css, flexbox

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

inserisci la descrizione dell'immagine qui

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

La chiave è che ho bisogno di ognuna delle tre regioni per essere fratelli, qualcosa del tipo:

<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 {

}

È possibile senza aggiungere un nodo intermedio da contenere .red e .yellow? È facile a quel punto, ma mi piacerebbe sapere se è possibile fare ciò che descrivo sopra.

risposte:

11 per risposta № 1

Puoi utilizzare le colonne di wrapping per ottenere la tua bandiera del Benin:

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

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

E il .green è allocato width:40% relativo a .flag

Buona fortuna con il vostro progetto!

inserisci la descrizione dell'immagine qui

.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>