Песочница CSS Flexbox
НовоеНастраивайте свойства flex с живым предпросмотром и копируйте CSS.
Container properties
Selected item
Click an item in the preview to edit its flex-grow, flex-shrink, flex-basis, order and align-self — or turn it into a nested flex container.
Runs entirely in your browser. Nothing is uploaded.
Визуальный генератор flexbox, который пишет CSS за вас
Этот генератор flexbox превращает модель CSS Flexible Box Layout в нечто, что можно увидеть. Вместо того чтобы гадать, что сделает justify-content или align-items, вы переключаете каждое свойство в подписанном элементе управления и наблюдаете, как живое превью мгновенно перестраивается, — а затем копируете чистый, готовый к продакшену код. Работает полностью в браузере, без регистрации и без загрузки чего-либо.
Это настоящий плейграунд flexbox: реальный flex-контейнер с редактируемыми дочерними элементами, полное управление контейнером и каждым элементом по отдельности, вложенные контейнеры, масштабируемое адаптивное превью и шарабельный URL. Изучаете ли вы flexbox или быстро строите навигационную панель, ряд карточек или центрированный hero-блок — вы получаете точный макет и нужный CSS, Tailwind или Bootstrap за секунды.
Каждое свойство контейнера с живым превью
Управляйте контейнером так, как предписывает спецификация. Задайте flex-direction (row, row-reverse, column, column-reverse) для выбора главной оси, justify-content для распределения элементов вдоль неё и align-items для их выравнивания по поперечной оси. Включите flex-wrap, чтобы элементы переходили на новые строки, используйте align-content для расстановки этих строк и задайте независимые значения отступов между строками и столбцами.
Встроенная легенда осей показывает, какое направление является главной осью, а какое — поперечной при изменении flex-direction, чтобы связь между justify-content и align-items наконец стала понятной. Это практическая шпаргалка по flexbox, которую вы изучаете, делая.
Управление каждым элементом: grow, shrink, basis, order и align-self
Большинство генераторов останавливаются на контейнере. Этот позволяет кликнуть на любой элемент в превью и редактировать его по отдельности: задать flex-grow, flex-shrink и flex-basis (сокращение flex), переопределить align-self и изменить order для визуального перемещения без прикосновения к HTML. Добавляйте или удаляйте элементы, чтобы посмотреть, как перераспределяется пространство.
Это делает построение реальных паттернов простым — фиксированная боковая панель рядом с гибкой основной колонкой (flex: 0 0 240px рядом с flex: 1), единственный центрированный элемент или ссылка в подвале, прижатая вправо с помощью margin-left: auto.
Вложенный flexbox и адаптивное превью
Реальные макеты вкладываются. Любой элемент может стать собственным вложенным flex-контейнером со своим направлением, justify и align — именно то, что нужно генератору вложенного flexbox для карточек с заголовком над телом или тулбара внутри тулбара. Сгенерированный код включает и вложенные правила.
Поскольку flexbox про адаптивное поведение, превью масштабируемо: тяните за ручку или выбирайте пресет ширины «Мобильный / Планшет / Десктоп» и наблюдайте, как элементы переносятся и выстраиваются при каждом размере. Это самый быстрый способ проверить поведение адаптивного flexbox-макета перед выпуском.
Копируйте как CSS, Tailwind или Bootstrap — и сравнение с другими инструментами
Переключайте вкладку вывода, чтобы получить формат, который использует ваш проект. CSS даёт чистые правила .container и для каждого элемента с сокращением flex. Tailwind записывает утилитарные классы — flex, flex-col, justify-between, items-center, gap-4, flex-1, order-2 — в готовый для вставки HTML-сниппет. Bootstrap выводит эквивалентные утилитарные классы d-flex. Выводятся только те свойства, которые вы реально изменили, поэтому результат остаётся минимальным и читаемым.
Другие визуальные генераторы, такие как Flexbox.help, пропускают управление каждым элементом и вложенные контейнеры. Онлайн-плейграунд Tailwind не генерирует ванильный CSS. Этот инструмент поддерживает все три формата вывода, обрабатывает вложенность и работает офлайн после загрузки — никакого аккаунта, никаких затрат, никаких данных, покидающих ваш браузер.
Frequently asked questions
Что такое Flexbox в CSS и зачем он используется?
Flexbox (CSS Flexible Box Layout) — это одномерная модель макета для расположения элементов в одной строке или столбце и распределения пространства между ними. Активируется одной строкой — display: flex — на родительском элементе, после чего дочерние элементы становятся flex-элементами, которые можно выравнивать, распределять и масштабировать без float и ручных отступов. Используется, потому что упрощает типичные задачи: центрирование, колонки одинаковой высоты, навигационные панели, ряды карточек.
Как использовать flexbox?
Добавьте display: flex к элементу-контейнеру, затем управляйте дочерними элементами через свойства контейнера — flex-direction (row или column), justify-content (расстояние вдоль главной оси), align-items (выравнивание по поперечной оси), flex-wrap и gap. Например, .nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; } располагает логотип и ссылки в строке, выровненные по центру по вертикали, на противоположных концах.
Как отцентрировать div с помощью flexbox?
Сделайте родителя flex-контейнером и отцентрируйте по обеим осям: .parent { display: flex; justify-content: center; align-items: center; } — это помещает дочерний элемент точно в середину по горизонтали и вертикали. Задайте родителю высоту (например min-height: 100vh для полноэкранного центрирования). Это самый чистый способ идеально отцентрировать один элемент.
В чём разница между justify-content и align-items?
justify-content располагает элементы вдоль главной оси, а align-items — по поперечной. Главная ось задаётся flex-direction. При flex-direction: row по умолчанию justify-content распределяет элементы горизонтально, а align-items выравнивает их вертикально. Переключитесь на flex-direction: column — и они поменяются ролями. Живая легенда осей в инструменте показывает, что есть что при смене направления.
Что такое flex-grow, flex-shrink и flex-basis?
Это три пообъектных свойства, которые определяют, как меняется размер flex-элемента, обычно записываемые вместе как сокращение flex. flex-basis — начальный размер до распределения свободного места. flex-grow показывает, насколько жадно элемент расширяется для заполнения оставшегося места (0 = не расти, 1 = занять долю). flex-shrink — насколько охотно он уменьшается при нехватке места. Часто используемый flex: 1 означает равный рост для всех элементов.
Как сделать перенос flex-элементов?
Задайте flex-wrap: wrap на контейнере, чтобы не помещающиеся элементы переходили на новую строку вместо того, чтобы выходить за границы или сжиматься. По умолчанию flex-wrap: nowrap принудительно размещает всё в одну строку. С включённым переносом задайте элементам flex-basis (например flex: 1 1 200px), чтобы каждая строка аккуратно заполнялась, и используйте align-content для расстановки получившихся строк.
Этот генератор flexbox бесплатный и приватный?
Бесплатный, без необходимости регистрации. Весь плейграунд работает в браузере — ваш макет, сгенерированный CSS и ссылка для шаринга создаются на вашем устройстве и никогда не загружаются на сервер. Можно добавить в закладки и пользоваться офлайн после загрузки страницы. Никакого аккаунта и никаких ограничений на количество настраиваемых макетов.
Related tools
Все инструменты
Новое Смешивание цветов
Смешивайте два цвета в любой пропорции и копируйте результат или любой шаг.
Новое Пипетка цвета с изображения
Выберите любой цвет с изображения и получите его доминирующую палитру в HEX, RGB и HSL.
Новое Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Новое Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Пипетка и конвертер цвета
Выбирайте цвет и конвертируйте между HEX, RGB, HSL и OKLCH.
Новое Проверка контраста цвета
Проверяйте контраст по WCAG AA/AAA между цветом текста и фоном.