Генератор CSS Flexbox

Визуальная площадка для создания flexbox-макетов с предпросмотром и генерацией кода

Свойства контейнера

flex-direction

flex-wrap

justify-content

align-items

align-content

gap (px) 10

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

Свойства элемента

Выбрать элемент

order

flex-grow

flex-shrink

flex-basis

align-self

Пресеты макетов

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

Сгенерированный CSS

Вся обработка происходит в вашем браузере. Данные не отправляются на сервер.

Примеры использования

Центрирование контента

Идеальное центрирование контента по горизонтали и вертикали с помощью flexbox.

Макет с боковой панелью

Классический макет «боковая панель + основной контент» на flexbox.

Сетка карточек

Адаптивная сетка карточек с переносом строк и равномерными отступами.

Возможности

Предпросмотр в реальном времени

Наблюдайте за обновлением flexbox-макета в реальном времени при изменении свойств

Готовый CSS-код

Получайте чистый CSS-код, готовый к копированию, для контейнера и элементов

Пресеты макетов

Быстрый старт с популярными пресетами: центрирование, боковая панель, навигация и другие

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

Управляйте свойствами отдельных элементов: order, flex-grow, flex-shrink и align-self

Как пользоваться?

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

Выберите flex-direction, justify-content, align-items, flex-wrap и значение gap.

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

Задайте количество элементов и настройте индивидуальные свойства: flex-grow и order.

Скопируйте CSS

Скопируйте сгенерированный CSS-код и используйте его в проекте. Попробуйте пресеты для быстрой вёрстки.

Шпаргалка CSS Flexbox

Быстрый справочник по всем свойствам Flexbox

Свойства контейнера

Свойство	Значения
`display`	flex \| inline-flex
`flex-direction`	row \| row-reverse \| column \| column-reverse
`flex-wrap`	nowrap \| wrap \| wrap-reverse
`flex-flow`	(shorthand)
`justify-content`	flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly
`align-items`	stretch \| flex-start \| flex-end \| center \| baseline
`align-content`	flex-start \| flex-end \| center \| space-between \| space-around \| stretch
`gap`	(sets row-gap and column-gap)
`row-gap`
`column-gap`

Свойства элемента

Свойство	Значения
`order`	(default: 0)
`flex-grow`	(default: 0)
`flex-shrink`	(default: 1)
`flex-basis`	\| auto (default: auto)
`flex`	(shorthand)
`align-self`	auto \| flex-start \| flex-end \| center \| baseline \| stretch

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

Flexbox идеально подходит для одномерных макетов — когда нужно расположить элементы в один ряд или столбец. Используйте CSS Grid, когда вам нужно одновременно контролировать и строки, и столбцы, например, в сложных макетах страниц.

justify-content выравнивает элементы flex по главной оси (по умолчанию — горизонтально), а align-items — по поперечной оси (по умолчанию — вертикально). Например, justify-content: center центрирует элементы по горизонтали, а align-items: center — по вертикали.

flex-grow определяет, насколько сильно элемент flex будет расти относительно соседних элементов при наличии свободного пространства. Значение 1 означает, что элемент займет все оставшееся пространство. Если у двух элементов установлено значение flex-grow: 1, лишнее пространство разделится между ними поровну.

Установите flex-wrap: wrap для контейнера flex. По умолчанию стоит значение nowrap, которое заставляет все элементы располагаться в одну линию. С параметром wrap элементы будут переноситься на новую строку при нехватке места.

flex — это сокращение для свойств flex-grow, flex-shrink и flex-basis одновременно. Например, flex: 1 1 auto означает, что элемент может расти, может сжиматься и имеет автоматический базовый размер. flex: 1 является распространенным сокращением для flex: 1 1 0.

Добавьте display: flex, justify-content: center и align-items: center к контейнеру. Это отцентрует дочерние элементы как по горизонтали, так и по вертикали. Используйте пресет «Centered» в этом генераторе, чтобы применить это мгновенно.

Да. Выберите любой элемент в генераторе и независимо от остальных настройте его order, flex-grow, flex-shrink, flex-basis и align-self.

Нет. Все происходит в вашем браузере. Ничего не загружается и не хранится нигде.

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

Генератор Flexbox — это визуальная площадка, где вы настраиваете свойства flex-контейнера и элементов и сразу видите результат. Больше не нужно гадать, как выглядит justify-content: space-between. Настраивайте, просматривайте, копируйте CSS.

Основные возможности

Полный контроль над свойствами контейнера: flex-direction, wrap, justify-content, align-items и gap. Индивидуальные настройки элементов: order, grow, shrink, basis и align-self. Пресеты макетов (центрирование, боковая панель, holy grail, навигация, сетка карточек, подвал) для быстрого старта в один клик.

Распространённые сценарии

Центрирование контента по вертикали и горизонтали, создание навигационных панелей, построение адаптивных сеток карточек с переносом, а также классических макетов с боковой панелью. Flexbox элегантно справляется с этими задачами при минимальном количестве CSS.

Советы

Начните с пресета и корректируйте под себя. Используйте gap вместо margin между flex-элементами — код будет чище. Помните, что flex-wrap: wrap — ваш лучший друг при адаптивной вёрстке.

Конфиденциальность

Всё работает в вашем браузере. Данные о макетах не покидают ваш компьютер.

Безопасность и конфиденциальность

Безопасность ваших данных — наш приоритет

Локальная обработка

Вся обработка происходит в вашем браузере

Без передачи данных

Ваши данные не отправляются на наши серверы

Без хранения данных

Данные не хранятся и не передаются

SSL-шифрование

SSL-шифрование для безопасного соединения

Next Step

Генератор CSS Grid

Создавайте CSS Grid-макеты с визуальным редактором

Генератор HTML-таблиц

Создавайте HTML-таблицы с визуальным редактором

Был ли этот инструмент полезен?

Генератор CSS Flexbox

Свойства контейнера

Свойства элемента

Пресеты макетов

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

Сгенерированный CSS

Примеры использования

Центрирование контента

Макет с боковой панелью

Сетка карточек

Возможности

Предпросмотр в реальном времени

Готовый CSS-код

Пресеты макетов

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

Как пользоваться?

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

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

Скопируйте CSS

Шпаргалка CSS Flexbox

Свойства контейнера

Свойства элемента

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

Когда следует использовать Flexbox вместо Grid?

В чем разница между justify-content и align-items?

Что делает flex-grow?

Как сделать так, чтобы элементы flex переносились на следующую строку?

Что такое сокращенное свойство flex?

Как идеально отцентровать содержимое с помощью Flexbox?

Могу ли я настроить отдельные элементы flex?

Отправляет ли этот инструмент данные на сервер?

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

Основные возможности

Распространённые сценарии

Советы

Конфиденциальность

Безопасность и конфиденциальность

Локальная обработка

Без передачи данных

Без хранения данных

SSL-шифрование

CSS Flexbox vs Grid: какую систему вёрстки выбрать?

Next Step

Генератор CSS Grid

Генератор HTML-таблиц

Похожие инструменты

SEO-анализатор

Минификатор CSS/JS

Тестер регулярных выражений

Просмотрщик SVG-кода

Декодер JWT

Проверка контрастности цветов