/ / CSS para una columna, dos filas con hermanos con flexbox (como la bandera de Benin!) - css, flexbox

CSS para una columna, dos filas con hermanos con flexbox (como la bandera de Benin!) - css, flexbox

La forma más simple que he encontrado para explicar esto es simplemente mostrarles la bandera de Benín:

enter image description here

Me gustaría hacer algo similar con flexbox en CSS, pero hasta ahora he estado desconcertado.

La clave es que necesito que cada una de las tres regiones sean hermanos, algo así como:

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

}

¿Es esto posible sin agregar un nodo intermediario para contener .red y .yellow? Es fácil en ese punto, pero me gustaría saber si es posible hacer lo que describo arriba.

Respuestas

11 para la respuesta № 1

Puede usar el ajuste de columnas para obtener su Bandera de Benin:

La primera columna (izquierda) es .verde en height:100% relativo al contenedor .flag.

La segunda columna (derecha) es .yellow, .red en height:50% relativo a .flag

Y el .green está asignado width:40% relativo a .flag

¡Buena suerte con tu proyecto!

enter image description here

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