Создать аккаунт
Интерфейсы и CSSРаботает в браузере

Flexbox Playground

Соберите базовую flex container declaration без drag-and-drop layout builder и без исполнения произвольного CSS.

  • Direction/justify/align
  • Gap + wrap
  • Plain CSS output
Онлайн-инструмент

Попробуйте инструмент

Добавьте данные, выберите нужные параметры и получите готовый результат.

Исходные данные

Результат

display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
  • Инструмент выдаёт container declaration, не полноценный layout editor.

Ваши данные остаются здесь

Текст и выбранные файлы обрабатываются в текущем браузере и не отправляются на сервер для получения результата.

Проверено: 2026-07-17
01

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

  1. 1

    Выберите flex-direction.

  2. 2

    Настройте justify-content, align-items, gap и wrap.

  3. 3

    Скопируйте CSS declaration block.

02

Что умеет инструмент

  • Основные flex-direction values.
  • Основные justify-content и align-items values.
  • Bounded gap и flex-wrap toggle.
03

Когда пригодится

  • Базовая настройка toolbar, card row или navigation group.
  • Сравнение alignment values перед внедрением.
  • Фиксация container declaration для UI kit documentation.
04

Что происходит внутри

Output ограничен container-level declarations.

Gap ограничен 0–64 px для компактного и предсказуемого CSS.

05

Вопросы и ответы

Почему нет flex-basis?

Flex-basis относится к child item rules, а этот tool генерирует только container CSS.

Это заменяет layout builder?

Нет. Это bounded generator для быстрого CSS output, не визуальный редактор макета.