Как Flexbox по-особенному?

Question

Я хочу разделить мои деления на что-то вроде изображения ниже, используя flexbox, но я не уверен, как это сделать. Нужно ли использовать для этого абсолютные позиции или у flexbox есть способ приблизиться к нему без особых проблем?

Answer 1

То, что вы описали, определенно возможно.Я представил примерный план того, как этого можно достичь ниже. Эта ссылка должна заполнить пробелы для вас.По сути, вам нужен контейнер, который имеет атрибуты display: flex и flex-direction: row.Тогда дочерним элементам в контейнере понадобятся соответствующие атрибуты flex-direction и flex-grow.

Вам также следует проверить этот сайт , чтобы увидеть, поддерживается ли flexbox браузерами, на которые вы ориентируетесь..

edit Вам также нужно установить свойство order , если вы хотите изменить порядок элементов HTML - благодаря @BugsArePeopleToo, который поднял это в комментарии.

Answer 2

Если вы используете flexbox для этого макета, вам понадобится несколько дополнительных элементов div-обертки: один, содержащий все пять элементов div, один, содержащий элементы div 1 и 4, и один, содержащий элементы div 2 и 5. Это также может стоить попробовать CSS-сетку, созданную для такого рода вещей без использования div-обёрток.