/ / CSS para uma coluna, duas linhas com irmãos com flexbox (como a bandeira do Benin!) - css, flexbox

CSS para uma coluna, duas linhas com irmãos com flexbox (como a bandeira do Benin!) - css, flexbox

A maneira mais simples que encontrei para explicar isso é simplesmente mostrar a bandeira do Benin:

insira a descrição da imagem aqui

Gostaria de fazer algo semelhante com o flexbox em CSS, mas até agora fiquei perplexo.

A chave é que eu preciso de cada uma das três regiões para ser irmãos, algo 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 {

}

Isso é possível sem adicionar um nó intermediário para conter .red e .yellow? É fácil nesse ponto, mas gostaria de saber se é possível fazer o que descrevo acima.

Respostas:

11 para resposta № 1

Você pode usar colunas de quebra automática para obter sua bandeira do Benin:

A primeira coluna (esquerda) é .green em height:100% em relação ao contêiner .flag.

A segunda coluna (direita) é .amarelo. height:50% relativo a .flag

E o verde é alocado width:40% relativo a .flag

Boa sorte com seu projeto!

insira a descrição da imagem aqui

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