Flexible Boxes — CSS флексбокс генератор

Flexible Boxes — это очень полезный ресурс для тех, кто использует флексы в вёрстке сайтов.

С помощью Flexible Boxes вы сможете интерактивно изобразить желаемое расположение блоков, и мгновенно увидеть результат реализации на HTML и CSS.

Я постоянно пользуюсь этим ресурсом в работе, т.к. флекс-свойств очень много, и все запомнить трудно. Даже опытный веб-разработчик может надолго призадуматься, как ему решить ту или иную задачу, в которой нужно использовать флексы.

Данный генератор позволяет очень быстро смоделировать часть макета, которую вам нужно реализовать на флексах. Им сможет пользоваться любой пользователь, у которого есть хотя бы базовые знания флексов и их свойств.

Например, нам нужно на сайте расположить блоки таким образом:

Необходимо получить данный результат
Необходимо получить данный результат

То есть имеется три блока: два блока по 50% ширины родительского блока, а третий под ними и с шириной 100%.

Решение:

В разделе «DOM» набросайте дерево элементов (для удобства имена блоков можно переименовать). Дерево элементов, где внутри блока находятся три элемента:

Раздел «DOM»
Раздел «DOM»

С помощью панели «TOOLBAR» отрегулируйте необходимые настройки (то есть необходимые флекс-свойства). Результат вы сразу же увидите в центральном фрейме данного генератора. Настройки для родительского блока:

Настройки для родительского блока
Настройки для родительского блока

Для первых двух дочерних элементов нужно задать эти настройки:

Настройки для первых двух дочерних элементов
Настройки для первых двух дочерних элементов

Для третьего дочернего элемента настройки будут отличаться от первых двух дочерних элементов:

Настройки для третьего дочернего элемента
Настройки для третьего дочернего элемента

В нижней части генератора Flexible Boxes мы видим результат на HTML и CSS. То, что получилось, вы можете посмотреть по данной ссылке. И это ещё один плюс данного генератора — можно делиться ссылкой того, что вы в нем набросали 🙂

Результат на HTML и CSS:

Результат на HTML и CSS
Результат на HTML и CSS

Вот и всё 🙂. Это гораздо проще, чем может показаться на первый взгляд. Честно говоря, когда-то мне было трудно пользоваться данным ресурсом, потому что не было никаких представлений о флексбокс технологиях. Всё-таки перед тем, как начать пользоваться Flexible Boxes генератором, необходимо изучить основные свойства флексов. Иначе вы просто не разберётесь, как пользоваться данным ресурсом.