/ / CSS pre jeden stĺpec, dva riadky so súrodencami s flexboxom (ako vlajka Benin!) - css, flexbox

CSS pre jeden stĺpec, dva riadky so súrodencami s flexboxom (ako vlajka Benina!) - css, flexbox

Tento najjednoduchší spôsob, akým som vám to vysvetlil, je jednoducho ukázať vám vlajku Beninu:

tu zadajte popis obrázku

Ja by som rád urobil niečo podobné s flexbox v CSS, ale zatiaľ som bol flummoxed.

Kľúčom je, že potrebujem každý z troch regiónov byť súrodencami, napríklad:

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

}

Je to možné bez pridania sprostredkovateľského uzla, ktorý má obsahovať .red a .yellow? V tomto momente je to jednoduché, ale ja by som rád vedel, či je možné urobiť to, čo som opísal vyššie.

odpovede:

11 pre odpoveď č. 1

Môžete použiť baliace stĺpce na získanie svojej vlajky Benin:

Prvý (ľavý) stĺpec je .green na height:100% vzhľadom na kontajner .flag.

Druhý (pravý) stĺpec je height:50% vzhľadom na .flag

A .green je pridelená width:40% vzhľadom na .flag

Veľa šťastia s projektom!

tu zadajte popis obrázku

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