@DigitalEmotions

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

Есть макет из трех столбцов, построенный на 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, не добавляя лишних элементов.

8775c873d4e440d0ba8c46cc9fd17e37.png
  • Вопрос задан
  • 1624 просмотра
Решения вопроса 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%;
}


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы