Генератор CSS Flexbox

Настраивайте направление, перенос, выравнивание и отступы flex-контейнера, а также рост, порядок и выравнивание каждого элемента визуально. Готовый CSS-код.

Контейнер

flex-direction

flex-wrap

justify-content

align-items

align-content

gappx

align-content действует, только когда элементы переносятся на несколько строк.

Количество элементов

Элемент 1

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

flex-grow

flex-shrink

order

flex-basis

align-self

Предпросмотр

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

CSS-код

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}

Что такое Генератор CSS Flexbox?

Интерактивная площадка для flexbox: задайте свойства контейнера, добавьте до 12 дочерних элементов и настройте для каждого flex-grow, flex-shrink, flex-basis, order и align-self. Предпросмотр применяет в точности сгенерированный CSS.

Как пользоваться Генератор CSS Flexbox

Настройте контейнер: flex-direction, flex-wrap, justify-content, align-items, align-content и gap.
Выберите количество элементов в предпросмотре.
Выберите элемент (кнопкой или щелчком в предпросмотре) и задайте flex-grow, flex-shrink, flex-basis, order и align-self.
Меняйте размер предпросмотра, потянув за угол, чтобы увидеть реакцию макета.
Скопируйте CSS-код для .container и правил .item-n.

Пример

Ввод

justify-content space-between, gap 16px; item 2: flex-grow 1, order 2, align-self center

Вывод

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
}

.item-2 {
  flex: 1 1 auto;
  order: 2;
  align-self: center;
}

Правило для элемента появляется только потому, что его значения отличаются от значений по умолчанию.

Когда использовать Генератор CSS Flexbox

Flexbox подходит для одномерных макетов: панелей навигации, тулбаров, групп кнопок, медиаобъектов и центрирования. Для двумерных макетов страниц со строками и столбцами одновременно обычно лучше генератор CSS Grid.

Как работает Генератор CSS Flexbox

Контейнер всегда получает display: flex, а также direction, wrap, justify-content и align-items. align-content записывается только если элементы могут переноситься (на одну строку он не влияет), а gap только если он больше 0. Для элементов записываются лишь значения, отличающиеся от значений по умолчанию: flex: grow shrink basis, если не 0 1 auto, order, если не 0, и align-self, если не auto, в правилах .item-1, .item-2 и так далее. Некорректный flex-basis помечается и игнорируется.

Распространенные Случаи Использования

Центрирование содержимого по горизонтали и вертикали
Панели навигации с элементом, прижатым вправо
Столбцы равной ширины через flex: 1
Списки тегов или карточек с переносом
Визуальная перестановка элементов через order

Часто Задаваемые Вопросы

Почему в моём CSS нет align-content?

align-content распределяет только строки flex-контейнера с переносом. При flex-wrap: nowrap строка одна, поэтому инструмент его не выводит.

Что значит flex: 1 1 auto?

Элемент может расти (1) и сжиматься (1) от своего автоматического размера. flex-grow определяет, как свободное место делится между элементами.

Влияет ли order на доступность?

order меняет только визуальный порядок. Скринридеры и фокус с клавиатуры по-прежнему следуют порядку в HTML-коде, поэтому не используйте его для смысловой перестановки.