CSS flex-base не работает, когда flex-direction это 'column'
Моя цель состоит в том, чтобы создать макет из двух столбцов с flexbox, в котором первый столбец имеет две строки, а второй столбец имеет одну, например:
настройкаflex-basis: 100% на третий пункт дает желаемый эффект, но только когда контейнерflex-direction являетсяrow:
измененияflex-direction вcolumn приводит к следующему, если толькоheight устанавливается явно, что недопустимо в моем проекте:
Как я могу получить первое изображение без явной настройкиheight контейнера?
Вот Plunker, иллюстрирующий проблему.
body {
display: flex;
height: 100px;
width: 100px;
}
.container {
display: flex;
flex-direction: column; /* Setting this to `row` gives the expected effect,but rotated */
flex-grow: 1;
flex-wrap: wrap;
/* height: 100%; */ /* Setting this fixes the problem, but is infeasible for my project*/
}
.item {
flex-grow: 1;
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: green;
flex-basis: 100%;
}<div class="container">
<div class="item one"> </div>
<div class="item two"> </div>
<div class="item three"> </div>
</div>