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

CSS для одного стовпця, два ряди з братами та сестрами з flexbox (наприклад, прапор Бенін!) - 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

Ви можете використовувати стовпчики для обгортки, щоб отримати прапор Бенін:

Перший (лівий) стовпець - зелений при height:100% відносно контейнера .flag.

Другий (правий) стовпець є 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>