Генератор flex, flexbox

  • Контейнер
  • Блоки
  • Результат
  • ?

Вид отображения

Значения для display

flex: Блочный.

inline-flex: Строчный.

display: ?

Направление главной оси

Группируется в короткую запись и устанавливается первым значением: "flex-flow: row nowrap".

Значения для flex-direction

row: → Слева направо.

row-reverse: ← Справа налево.

column: ↓ Сверху вниз.

column-reverse: ↑ Снизу вверх.

flex-direction: ?

Выравнивание по главной оси

Значения для justify-content

flex-start: ← Прижаты к началу.

flex-end: → Прижаты к концу.

center: → ← Прижаты по центру.

space-between: ← → Равномерно распределяются по всей длине. Первый и последний элемент прижаты к своим краям контейнера.

space-around: ← → Равномерно распределены по всей длине. Пустое пространство перед первым и после последнего элемента равно половине пространства между двумя соседними элементами.

justify-content: ?

Выравнивание по поперечной оси

Значения для align-items

flex-start: ↑ Блоки выровнены в начале поперечной оси контейнера.

flex-end: ↓ Блоки выровнены в конце поперечной оси контейнера.

center: Блоки выровнены по центру (линии поперечной оси) контейнера.

baseline: Блоки выровнены по базовой линии.

stretch: Блоки растянуты на всё пространство контейнера.

align-items: ?

Многострочная организация блоков

Группируется в короткую запись и устанавливается вторым значением: "flex-flow: row nowrap".

Значения для flex-wrap

nowrap: В одну линию.

wrap: В несколько строк.

wrap-reverse: В несколько строк, в противоположном направлении указанном в flex-direction.

flex-wrap: ?

Способ выравнивания по вертикали (только многострочный режим)

Значения для align-content

flex-start: ↑ Строки в начале поперечной оси (прижать блоки к верху).

flex-end: ↓ Расположение строк начиная с конца поперечной оси (прижать блоки к низу).

center: Строки по центру контейнера.

space-between: Равномерное распределение строк по всей высоте.

space-around: Равномерное распределение строк по всей высоте с отступом перед первой строкой и после последней, равными половине рсстояния между соседними строками.

stretch: Строки равномерно растянуты.

align-content: ?

Ширина контейнера

width: ?

Высота контейнера

height: ?

Общие значения для всех блоков × Очистить

-+

Жадность

Отношение размеров у блоков. Блок со значением 2 будет в два раза больше блока со значением 1.

Группируется в короткую запись и устанавливается первым значением: "flex: 0 1 auto".

flex-grow: ?

Сжимаемость

Коэффициент сжатия блоков в контейнере. Указывает степень уменьшения по отношению к другим блокам, для размещения блоков в одну строку.

Группируется в короткую запись и устанавливается вторым значением: "flex: 0 1 auto".

flex-shrink: ?

Базовый размер

Основа блока. Является начальным (базовым) размером элемента. Возможно указывать размер в следующих единицах измерения: px, em, %, mm, pt и т.д..

Группируется в короткую запись и устанавливается третьим значением: "flex: 0 1 auto".

flex-basis: ?

Отступ

Внешний отступ. Значение auto работает как по вертикали так и по горизонтали.

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

Пример: "10px auto".

margin: ?

Поле

Внутренний отступ.

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

Пример: "10px auto".

padding: ?

Порядок (вес)

Порядок следования блока. Блоки с меньшим весом располагаются вначале.

order: ?

Выравнивание по поперечной оси

Выравнивание блока текущей строки. Переписывает значение контейнера указанного в align-items.

Значения для align-self

auto: Значение родительского контейнера из align-items.

flex-start: ↑ Блоки выровнены в начале поперечной оси контейнера.

flex-end: ↓ Блоки выровнены в конце поперечной оси контейнера.

center: Блоки выровнены по центру (линии поперечной оси) контейнера.

baseline: Блоки выровнены по базовой линии.

stretch: Блоки растянуты на всё пространство контейнера.

align-self: ?

CSS ✂ Копировать

HTML ✂ Копировать

Описание flex генератора

Общие сведения

Основная идея flex генератора сделать удобным процесс разработки flex конструкций: обеспечив наглядность и предоставив широкий набор дополнительных настроек. Данный генератор предоставляется бесплатно и без каких-либо ограничений на сайте cssworld.ru.

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

Использование

Каждый параметр имеет возможность выбора предустановленных значений. Значения по умолчанию выделены фоном. Параметры предусматривающие произвольные значения можно изменять самостоятельно.

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

Для удобства, процесс поделен на три последовательные составные части, размещенных в соответствующих вкладках, а также текущий справочный раздел: Контейнер, Блоки, Результат

Контейнер

Настройка контейнера flex блоков через установку параметров. Данные настройки имеют отношение исключительно к родительскому элементу flex блоков.

Блоки

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

Для установки значений конкретному блоку его необходимо предварительно выделить. Выделение блока возможно по клику на нем. Повторный клик снимает выделение. То же самое делает кнопка "Готово" отображаемая при выделенном элементе, а также переключение на другую вкладку снимает выделение.

У выделенного элемента возможно изменить контент (его текстовое наполнение), а также отдельно для него установить и очистить установленные значения.

Результат

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

Поддержка старых браузеров

Поддержка включается во вкладке "Результат" при включенной отметке "Поддержка старых браузеров (префиксы)". Данное действие добавляет предшествующие параметры с префиксами -ms- (только для IE10) и -webkit- (все остальные браузеры).

Блок 1
Блок 2
Блок 3

↑ Выберите блок для задания индивидуальных параметров

Контейнер ✂ Копировать

Блоки ✂ Копировать

Даты и версии начала поддержки Flex в браузерах

Колонки можно сортировать по дате и названию браузера.

Дата ↓Браузер ↓ВерсияТип поддержки
04.09.2012 IE 10 -ms- Поддерживает только 2012 синтакс
17.10.2013 IE 11 Поддерживает с некоторыми багами, см. ниже
29.07.2015 Edge 12 Полная
24.10.2006 Firefox 2 -moz- Поддерживает только старую спецификацию и не поддерживает wrapping
14.05.2013 Firefox 22 -webkit- Не поддерживает: flex-wrap, flex-flow, align-content
18.03.2014 Firefox 28 Полная
25.01.2010 Chrome 4 -webkit- Поддерживает только старую спецификацию и не поддерживает wrapping
26.06.2012 Chrome 21 -webkit-
18.07.2013 Chrome 29 Полная
18.03.2008 Safari 3.1 -webkit- Поддерживает только старую спецификацию и не поддерживает wrapping
22.10.2013 Safari 7 -webkit-
01.10.2015 Safari 9 Полная
05.11.2012 Opera 12.1 Полная
02.07.2013 Opera 15 -webkit- (Поскольку Opera перешла на движок Blink как у Chrome)
08.08.2013 Opera 17 Полная
03.04.2010 iOS Safari 3.2 -webkit- Поддерживает только старую спецификацию и не поддерживает wrapping
10.03.2014 iOS Safari 7 -webkit-
16.09.2015 iOS Safari 9 Полная
16.03.2015 Opera Mini 1 Полная (С версии 8 на iOS использует iOS Safari движок)
26.10.2009 Android Browser 2.1 -webkit- Поддерживает только старую спецификацию и не поддерживает wrapping
09.12.2013 Android Browser 4.4 Полная

Особенности старых браузеров IE

По умолчанию в IE10 параметр flex имеет значение "-ms-flex: 0 0 auto" вместо "flex: 0 1 auto". Третье значение, flex-basis, в параметре "flex: 0 1 auto" для IE11 обязательно. Некорректно рассчитывается высота при установленных у блоков значений min-height и вертикальное выравнивание для IE10 и IE11.

Рекомендации

Также рекомендуем статью: Понимание flex.