/ / CSS за една колона, два реда с братя и сестри с флексбокс (като знамето на Бенин!) - css, flexbox

CSS за една колона, два реда с братя и сестри с флексбокс (като знамето на Бенин!) - css, flexbox

Този най-прост начин, който намерих да обясня, е просто да ви покажа знамето на Бенин:

въведете описанието на изображението тук

Бих искал да направя нещо подобно на Flexbox в CSS, но досега съм бил размазан.

Ключът е, че имам нужда от всеки един от трите региона да бъдат братя и сестри, нещо като:

<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? В този момент е лесно, но бих искал да знам дали е възможно да направя онова, което описвам по-горе.

Отговори:

11 за отговор № 1

Можете да използвате опаковъчни колони, за да получите знамето си в Бенин:

Първата (вляво) колона е. Green at height:100% спрямо контейнера .flag.

Втората (вдясно) колона е .yellow, .red at 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>