/ / 1つの列のCSS、フレックスボックスの兄弟との2行(ベナンの旗のように!) - css、flexbox

1つの列のCSS、フレックスボックスを持つ兄弟の2行(ベナンの旗のように!) - css、flexbox

私がこれを説明するのを見いだした最も簡単な方法は、単にあなたにベナンの旗を見せることです:

ここに画像の説明を入力

私はCSSでフレックスボックスと似たようなことをしたいと思っていますが、これまで私はうんざりしています。

重要な点は、3つの地域のそれぞれが兄弟である必要があることです。

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

}

これを含む中間ノードを追加することなくこれを可能にするか .red そして .yellow?その時点では簡単ですが、上記で説明したことが可能かどうかを知りたいのです。

回答:

回答№1の11

ラッピングカラムを使用してベナン旗を得ることができます:

最初の(左の)列は.greenです。 height:100% .flagコンテナに相対的です。

2番目(右)の列は.yellow、.redは height:50% .flagとの相対

そして緑色が割り当てられます width:40% .flagとの相対

あなたのプロジェクトに幸運を祈る!

ここに画像の説明を入力

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