Генератор Flexbox верстки

Рад представить Вам интерактивный инструмент для генерации верстки основанной на гибких макетах сетки (CSS Flexbox Layout), он позволит наглядно произвести верстку необходимого блока для Вашего сайта. Кроме того, вы сможете максимально быстро обучиться этой технологии верстки, используя встроенные подсказки для каждого CSS свойства, или при необходимости перейти в справочник CSS свойств для получения более детальной информации о конкретном свойстве.

Если Вы ранее не сталкивались с моделью построения макетов страниц Flexbox, но хотите более детально познакомиться с ней, то подробную информацию об этом вы сможете получить в следующих статьях учебника, посвященному CSS:

Конструктор Flexbox

Настройки контейнера

height ? Определяет высоту контейнера

display ? Определяет как должен отображаться элемент:

flex - элемент отображается как блочный флекс контейнер.
inline-flex - элемент будет отображаться как строчный флекс контейнер.

flex-direction ? Позволяет указать направление, в соответствии с которым располагаются флекс элементы внутри флекс контейнера:

row - флекс элементы отображаются горизонтально, в виде строки. Это значение по умолчанию.
row-reverse - флекс элементы отображаются горизонтально, в виде строки по аналогии со значением row, но формирование строки идёт в обратном направлении.
column - флекс элементы отображаются вертикально как колонны. Формирование колонны осуществляется сверху вниз.
column-reverse - флекс элементы отображаются вертикально как колонны по аналогии со значением column, но формирование колонны идёт в обратном направлении (снизу вверх).

flex-wrap ? Определяет, будет ли флекс контейнер однострочным, или многострочным:

nowrap - Указывает, что флекс элементы выстраиваются в одну строку. Это значение по умолчанию.
wrap - Указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения).
wrap-reverse - Указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения) по аналогии со значением wrap, но формирование строк идёт в обратном порядке.

align-content ? Определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально):

stretch - строки внутри контейнера равномерно растягиваются, заполняя свободное пространство. Это значение по умолчанию.
flex-start - строки внутри контейнера располагаются в начале поперечной оси флекс контейнера.
flex-end - строки внутри контейнера располагаются в конце поперечной оси флекс контейнера.
center - строки внутри контейнера располагаются по его центру.
space-between - строки внутри контейнера равномерно распределяются, при этом первая строка позиционируются в начале поперечной оси, а последняя строка позиционируется с конца поперечной оси.
space-around - строки внутри контейнера равномерно распределяются, при этом пространство между двумя соседними строками одинаково, а пустое пространство перед первой строкой и после последней строки равно половине от пространства между соседними строками.
space-evenly - размещает четный промежуток между каждой строкой, включая верхний и нижний край контейнера.

justify-content ? Определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль главной оси контейнера (горизонтально):

flex-start - элементы позиционируются в начале контейнера. Это значение по умолчанию.
flex-end - элементы позиционируются в конце контейнера.
center - элементы позиционируются в центре строки контейнера.
space-between - элементы равномерно распределяются по всей строке, при этом первый элемент позиционируются в начале контейнера, а последний элемент позиционируется в конце контейнера.
space-around - элементы равномерно распределяются по всей строке, при этом пустое пространство между первым и после последнего элемента равно половине между соседними элементами в контейнере.
space-evenly - размещает четный промежуток между каждым элементом, включая начальний и дальний конец контейнера.

align-items ? Производит выравнивание всех элементов внутри флекс контейнера вдоль поперечной оси:

stretch - флекс элементы растягиваются по размеру контейнера вдоль поперечной оси. Это значение по умолчанию.
center - элементы располагаются по центру строки контейнера (середина поперечной оси, или оси столбца).
flex-start - элементы располагаются в начале строки контейнера.
flex-end - элементы располагаются в конце строки контейнера.
baseline - элементы распологаются по их базовой линии.

Настройки элементов

count?Количество блоков внутри флекс контейнера.

width?Ширина каждого блока внутри флекс контейнера.

height?Высота каждого блока внутри флекс контейнера.

margin?Внешние отступы каждого блока внутри флекс контейнера.

padding?Внутренние отступы каждого блока внутри флекс контейнера.

Настройка элемента

Выберите любой вложенный элемент для настройки...

width ? Ширина текущего блока внутри флекс контейнера.

height ? Высота текущего блока внутри флекс контейнера.

margin ? Устанавливает величину внешнего отступа от каждого края элемента в одном объявлении.

padding ? Устанавливает величину внутреннего отступа от каждого края элемента в одном объявлении.

order ? Устанавливает порядок следования флекс элемента в контейнере относительно остальных.
Если вы указываете значение для одного флекс элемента в контейнере, то это значение не будет являться его порядковым номером, а указывает только на "вес" его позиции по отношению к другим элементам. Допускается применение отрицательных значений (значение -1, например, смещает элемент к левому краю родительского контейнера). Значение по умолчанию 0.

align-self ? Задает выравнивание отдельных элементов строки внутри флекс контейнера. Свойство переопределяет значение выравнивания, заданного для контейнера свойством align-items конкретному элементу. Возможные значения:

auto - элемент наследует значение его родительского контейнера. Если родительский контейнер не имеет значения, то значение, устанавливается, как stretch. Это значение по умолчанию.
stretch - элемент растягивается по размеру строки контейнера вдоль поперечной оси.
center - элемент располагается по центру строки контейнера (середина поперечной оси).
flex-start - элемент располагается в начале строки контейнера (начало поперечной оси).
flex-end - элемент располагается в конце строки контейнера (конец поперечной оси).
baseline - элемент распологается по его базовой линии строки контейнера.

flex-grow ? Указывает на сколько элемент может увеличиться по отношению к остальным флекс элементам в одном контейнере.
Например, если в контейнере все блоки имеют значение свойства равное 1, а один блок имеет значение 2, то это означает, что он будет в два раза больше по отношению к ним (относительное значение). Если мы при этом добавим в контейнер еще один блок, то при этом ширина контейнера не изменится, а блок, который имел значение 2 по прежнему останется в два раза больше остальных, при этом ширина всех блоков пропорционально уменьшится. Значение по умолчанию 0.

flex-shrink ? Определяет, как элемент будет сжиматься относительно остальных флекс элементов в контейнере (при недостатке свободного пространства). Если мы устанавливаем значение равное 0, то мы запрещаем сжиматься элементу до размеров меньше чем его базовая ширина. Значение по умолчанию 1.

flex-basis ? Определяет размер для флекс элемента, установленный по умолчанию перед распределением пространства внутри флекс контейнера. Допускается использование как абсолютных значений (px, em, pt и так далее), так и значения в процентах. Значение по умолчанию auto (если элемент не имеет заданного размера, то размер будет высчитываться в зависимости от содержания элемента).

flex ? Является короткой записью для свойств flex-grow, flex-shrink и flex-basis.
Значение по умолчанию 0 1 auto.

Генератор Flexbox верстки

Конструктор Flexbox

Настройки контейнера

Настройки элементов

Настройка элемента

HTML code:

CSS code: