/ / CSS dla jednej kolumny, dwa wiersze z rodzeństwem z flexbox (jak flaga Benina!) - css, flexbox

CSS dla jednej kolumny, dwa wiersze z rodzeństwem z flexbox (jak flaga Benina!) - css, flexbox

Najprostszy sposób, w jaki to wyjaśniam, to po prostu pokazać flagę Beninu:

wprowadź opis obrazu tutaj

Chciałbym zrobić coś podobnego z flexboxem w CSS, ale do tej pory byłem oszołomiony.

Kluczem jest to, że każdy z trzech regionów potrzebuje rodzeństwa, coś w stylu:

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

}

Jest to możliwe bez konieczności dodawania węzła pośredniego .red i .yellow? W tym momencie jest to łatwe, ale chciałbym wiedzieć, czy można zrobić to, co opisałem powyżej.

Odpowiedzi:

11 dla odpowiedzi nr 1

Możesz użyć zawijania kolumn, aby uzyskać flagę Beninu:

Pierwsza (po lewej) kolumna to .green na height:100% względem kontenera .flag.

Druga (prawa) kolumna to .żółty, .red height:50% względem .flag

I .green jest przydzielony width:40% względem .flag

Powodzenia w projekcie!

wprowadź opis obrazu tutaj

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