Гибкое позиционирование в CSS

Question

Я создаю приложение React Native, и я хотел бы использовать flex для структурирования расположения моих элементов на экране.Учитывая, что у нас есть следующий экран: красная зона получила значение flex-grow 1, желтая зона 2 и зеленая зона 3. Все они имеют родителя с display: flex и flex-grow: 1.(Это React Native, поэтому по умолчанию flex-direction это столбец).

Мой вопрос следующий : Что делать, если зеленой зоны нет?Как я могу сказать flex, чтобы взять 1/6 родителя для красной зоны, 2/6 для желтой зоны и оставить остальные пустыми?

Answer 1

Мне удалось создать макет, который вы описали, применив flex-grow: 0 и flex-shrink: 0 к элементам flex.Установив flex-basis в соответствующие проценты, раскладка поддерживается с наличием или без наличия третьего деления.

.wrapper {
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
}
.one {
  flex: 0 0 16.666%; /* dont grow, dont shrink, starting basis */
  background: red;
}
.two {
  flex: 0 0 33.333%; /* dont grow, dont shrink, starting basis */
  background: yellow;
}
.three {
  flex: 0 0 50%; /* dont grow, dont shrink, starting basis */
  background: green;
}

<div class="wrapper">
  <div class="one">ONE</div>
  <div class="two">TWO</div>
  <div class="three">THREE</div>
</div>

На этот раз я опускаю третий div и мы получаем ту же раскладку:

.wrapper {
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
}
.one {
  flex: 0 0 16.666%; /* dont grow, dont shrink, starting basis */
  background: red;
}
.two {
  flex: 0 0 33.333%; /* dont grow, dont shrink, starting basis */
  background: yellow;
}
.three {
  flex: 0 0 50%; /* dont grow, dont shrink, starting basis */
  background: green;
}

<div class="wrapper">
  <div class="one">ONE</div>
  <div class="two">TWO</div>
</div>

Answer 2

Тео, вы хотите сделать это только с помощью flex или вы слышите другое предложение?

Это идеальный пример для использования grid .

Fiddle:https://jsfiddle.net/h17tezLd/

<div class="container">
    <div class="zone1"></div>
    <div class="zone2"></div>
    <div class="zone3"></div>
</div>

<style>
    .container {
        width: 150px;
        height: 300px;
        background: grey;
        display: grid;
        grid-template: 1fr 2fr 3fr / 100%;
        }
    .zone1 { background: red; }
    .zone2 { background: blue; }
    .zone3 { background: green; }
</style>