Как выровнять элементы flexbox как в таблице?

Question

[Антон]

Есть макет из трех столбцов, построенный на flexbox. Все столбцы генерируются через PHP и имеют такую структуру:

<div class="flex-container">
<div class="flex-inner"></div>
<div class="flex-inner"></div>
<div class="flex-inner"></div>
</div>

Как выровнять элементы flex-inner так, как показано на изображении, без добавления каких-либо родителей? С помощью таблицы это сделать просто, но как сделать с помощью flexbox, не добавляя лишних элементов.

Answer 1

[Станислав Ботев]

Стили можно писать инлайново, а можно задать блокам по классу и крутить-вертеть ими как угодно.
Ссылка на песочницу. Там же можете потягать окошечко и проверить резиновость. В примере ширина и высота контейнера имеют по 100 viewport units лишь для наглядности. В Вашем случае они могут быть другими.
И код, на случай, если песочница умрёт.

<div class="flex-container">
    <div class="flex-inner first"></div>
    <div class="flex-inner second"></div>
    <div class="flex-inner third"></div>
  </div>

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100vw;
  height: 100vh;
}
.flex-inner {
  display: flex;
}
.first {
  background-color: orange;
  width: 65%;
  height: 100%;
}

.second {
  background-color: green;
  width: 35%;
  height: 50%;
}

.third {
  background-color: yellow;
  width: 35%;
  height: 50%;
}

Чрезвычайно советую посмотреть этот и другие гайды по флексбоксам. Полезно знать, даже если Вы бэкэндер

Comments

[Антон]

Спасибо! Все получилось! Не до конца разобрался с работой свойства flex-direction.