Генератор Flexbox  — интерактивный онлайн-генератор CSS Flexbox

container Настройки контейнера
px px
row / column
px
items Элементы
Превью
Сгенерированный CSS 

        
✓ Скопировано!

      


    


  





Интерфейс генератора


Генератор Flexbox состоит из трёх основных зон:


    

  • Панель управления (слева) — настройки контейнера и дочерних элементов.
    • 

  • Превью (справа вверху) — мгновенное визуальное отображение результата.
    • 

  • CSS-код (справа внизу) — готовый код для копирования.
    • 





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


Все параметры раздела Контейнер применяются к родительскому элементу — тому, на котором задаётся display: flex.


display


Определяет тип flex-контейнера:


    

  • flex — блочный контейнер, занимает всю ширину строки.
    • 

  • inline-flex — строчный контейнер, подстраивается под содержимое.
    • 



flex-direction


Направление главной оси, по которой выстраиваются дочерние элементы:


    

  • row — слева направо (по умолчанию).
    • 

  • row-reverse — справа налево.
    • 

  • column — сверху вниз.
    • 

  • column-reverse — снизу вверх.
    • 



flex-wrap


Управляет переносом элементов на новую строку при нехватке места:


    

  • nowrap — все элементы в одну строку, возможно переполнение.
    • 

  • wrap — элементы переносятся на новую строку.
    • 

  • wrap-reverse — перенос в обратном направлении.
    • 



justify-content


Выравнивание элементов по главной оси (горизонталь при row):


    

  • flex-start — к началу контейнера.
    • 

  • flex-end — к концу контейнера.
    • 

  • center — по центру.
    • 

  • space-between — равные промежутки между элементами, крайние прижаты к краям.
    • 

  • space-around — равные промежутки вокруг каждого элемента.
    • 

  • space-evenly — одинаковые промежутки между всеми элементами, включая крайние.
    • 



align-items


Выравнивание элементов по поперечной оси (вертикаль при row) в пределах одной строки:


    

  • stretch — растягиваются на всю высоту строки (по умолчанию).
    • 

  • flex-start — к началу поперечной оси.
    • 

  • flex-end — к концу поперечной оси.
    • 

  • center — по центру.
    • 

  • baseline — по базовой линии текста.
    • 



align-content


Выравнивание строк относительно друг друга при многострочном переносе (flex-wrap: wrap). Не влияет при одной строке:


    

  • stretch — строки растягиваются, занимая всё свободное пространство.
    • 

  • flex-start — строки прижимаются к началу.
    • 

  • flex-end — строки прижимаются к концу.
    • 

  • center — строки по центру.
    • 

  • space-between — равные промежутки между строками.
    • 

  • space-around — равные промежутки вокруг каждой строки.
    • 



gap


Отступы между элементами. Два поля задают отступ по строке и по столбцу в пикселях. Значение 0 — без отступов.


height


Минимальная высота контейнера превью в пикселях. Удобно для проверки вертикального выравнивания.




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


Перейдите на нужный элемент через табы Item 1 / Item 2 / … или кликните по нему в области превью. Можно добавлять до 8 элементов кнопкой + Добавить и удалять кнопкой − Удалить.


order


Порядок отображения элемента независимо от его позиции в HTML. По умолчанию 0. Элементы с меньшим значением идут раньше.


flex-grow


Коэффициент роста. Определяет, насколько элемент увеличится относительно других, если в контейнере есть свободное место. 0 — не растёт, 1 — занимает всё доступное пространство.


flex-shrink


Коэффициент сжатия. Насколько элемент уменьшится при нехватке места. 1 — сжимается пропорционально, 0 — не сжимается никогда.


flex-basis


Начальный размер элемента до распределения свободного пространства. Принимает значения:


    

  • auto — размер по содержимому (по умолчанию).
    • 

  • Фиксированный размер: 100px, 150px и т. д.
    • 

  • Процентный размер: 30%, 50% и т. д.
    • 



align-self


Индивидуальное выравнивание по поперечной оси — переопределяет align-items контейнера для конкретного элемента:


    

  • auto — наследует значение align-items родителя.
    • 

  • flex-start, flex-end, center, baseline, stretch — аналогично одноимённым значениям align-items.
    • 





Вендорные префиксы


Чекбокс Вендорные префиксы над блоком с CSS-кодом добавляет в вывод строки -webkit- и -ms-. Это обеспечивает совместимость со старыми версиями браузеров. Для современных проектов префиксы можно отключить.




Копирование и применение CSS


    

  1. Настройте нужные параметры — превью обновляется мгновенно.
    2. 

  2. Нажмите кнопку ⎘ Копировать CSS в правом верхнем углу генератора.
    3. 

  3. Вставьте скопированный код в таблицу стилей вашего сайта: через Внешний вид → Редактор → style.css, через дополнительный CSS в Настройках темы или в отдельный CSS-файл.
    4. 

  4. Замените имена классов .container, .item-1, .item-2 и т. д. на реальные классы ваших HTML-элементов.
    5. 





Кнопка «Сброс»


Кнопка ↺ Сброс в шапке генератора возвращает все настройки контейнера и всех элементов к значениям по умолчанию и восстанавливает три стартовых элемента.




Пример сгенерированного кода


Для контейнера с тремя элементами, центрированием по обеим осям и зазором 16px генератор выдаст:


.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  gap: 16px 16px;
}

.item-1 { }
.item-2 { }
.item-3 { }