Генератор CSS Flexbox
Визуальная площадка для создания flexbox-макетов с предпросмотром и генерацией кода
Свойства контейнера
Свойства элемента
Пресеты макетов
Предпросмотр
Сгенерированный 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 — это визуальная площадка, где вы настраиваете свойства 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 — ваш лучший друг при адаптивной вёрстке.
Конфиденциальность
Всё работает в вашем браузере. Данные о макетах не покидают ваш компьютер.