/ / CSS für eine Spalte, zwei Zeilen mit Geschwistern mit Flexbox (wie die Flagge von Benin!) - CSS, Flexbox

CSS für eine Spalte, zwei Zeilen mit Geschwistern mit Flexbox (wie die Flagge von Benin!) - css, flexbox

Die einfachste Art, dies zu erklären, ist einfach, Ihnen die Flagge von Benin zu zeigen:

Bildbeschreibung hier eingeben

Ich würde gerne etwas Ähnliches mit flexbox in CSS machen, aber bis jetzt wurde ich verwirrt.

Der Schlüssel ist, dass ich jede der drei Regionen als Geschwister brauche, etwa so:

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

}

Ist dies möglich, ohne einen dazwischenliegenden Knoten hinzuzufügen? .red und .yellow? Es ist zu diesem Zeitpunkt einfach, aber ich würde gerne wissen, ob es möglich ist, das zu tun, was ich oben beschrieben habe.

Antworten:

11 für die Antwort № 1

Sie können Umbruchspalten verwenden, um Ihre Benin-Flagge zu erhalten:

Die erste (linke) Spalte ist .grün bei height:100% relativ zum .flag-Container.

Die zweite (rechte) Spalte ist .yellow, .red bei height:50% relativ zu .flag

Und das .green ist zugeteilt width:40% relativ zu .flag

Viel Glück mit Ihrem Projekt!

Bildbeschreibung hier eingeben

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