/ / CSS pour une colonne, deux lignes avec des frères et soeurs avec flexbox (comme le drapeau du Bénin!) - css, flexbox

CSS pour une colonne, deux lignes avec frères et sœurs avec flexbox (comme le drapeau du Bénin!) - css, flexbox

Ce moyen le plus simple que j'ai trouvé pour expliquer cela est simplement de vous montrer le drapeau du Bénin:

entrer la description de l'image ici

Je voudrais faire quelque chose de similaire avec flexbox en CSS, mais jusqu'ici j'ai été déconcerté.

L'essentiel est que chacune des trois régions soit une fratrie, quelque chose comme:

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

}

Est-ce possible sans ajouter un noeud intermédiaire pour contenir .red et .yellow? C'est facile à ce stade, mais je voudrais savoir s'il est possible de faire ce que je décris ci-dessus.

Réponses:

11 pour la réponse № 1

Vous pouvez utiliser des colonnes d'emballage pour obtenir votre drapeau Bénin:

La première colonne (à gauche) est .green à height:100% par rapport au conteneur .flag.

La deuxième colonne (à droite) est .yellow, .red à height:50% par rapport à .flag

Et le .green est alloué width:40% par rapport à .flag

Bonne chance pour votre projet!

entrer la description de l'image ici

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