Генератор Flexbox-вёрстки

Интерактивный конструктор для макетов на основе гибкой раскладки (CSS Flexbox Layout). Меняйте свойства контейнера и отдельных элементов, смотрите результат сразу и копируйте готовый CSS и HTML в свой проект.

Как пользоваться
  • Выберите готовый макет как отправную точку или начните со строки по умолчанию.
  • Свойства в блоке «Контейнер» применяются к .container. Чтобы настроить элементы, выберите один из них или пункт «все элементы (.item)» в списке «Настраиваем».
  • Нажмите на элемент в превью или выберите его в списке «Настраиваем», чтобы задать ему собственные значения. Такой элемент получит класс .item-N и отметку пунктиром.
  • Меняйте ширину превью ползунком «Ширина превью», чтобы проверить перенос элементов.
  • В текстовые поля можно вводить любые значения, которые поддерживает браузер; список подсказок открывается при вводе.

Подробнее о модели Flexbox читайте в статьях учебника «Верстка по Flexbox: работа с контейнерами» и «Верстка по Flexbox: работа с элементами», а описание каждого свойства — в справочнике CSS.

Конструктор Flexbox

Для вашего удобства рекомендую использовать полноэкранный режим.

Сохранение макета и отмена действий
  • Отмена и повтор. Кнопки «Отменить» и «Повторить» возвращают предыдущие настройки. История хранит до 100 изменений до перезагрузки страницы.
  • Клавиатура. Вне полей ввода работают Ctrl/⌘ + Zдля отмены и Ctrl/⌘ + Shift + Z для повтора. В полях — обычная отмена ввода.
  • Ссылка на макет. Кнопка «Поделиться» сохраняет текущий макетв адресе: настройки контейнера, элементы и их стили. Настройки попадут в историю браузера и сообщения, где вы поделитесь ссылкой. При открытии ссылки восстанавливаются принятые настройки, без истории изменений и незавершённого ввода.
  • Скачивание. Кнопка «Скачать HTML» сохраняет страницу с макетом. Используйте её и для больших макетов, если длина ссылки превышает ограничение.
Начать с макета:

Цвета и отступы элементов превью — только оформление, в код они не входят.

Контейнер .container

Главная ось: элементы выстраиваются в строку или в колонку, в прямом или обратном порядке. Справочник: flex-direction

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

Распределение элементов и свободного места вдоль главной оси. Справочник: justify-content

Выравнивание элементов поперёк главной оси внутри своей линии. Справочник: align-items

Распределение линий при переносе. Работает только с flex-wrap: wrap или wrap-reverse. Справочник: align-content

Расстояние между строками и колонками. Можно указать два значения: по вертикали и по горизонтали. Справочник: gap

Минимальная высота контейнера. Без свободного места выравнивание по поперечной оси незаметно. Справочник: min-height

Элементы

Выберите элемент в превью или в списке «Настраиваем», чтобы изменить его свойства. Общие настройки всех элементов — пункт «все элементы (.item)».

CSS
.container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 200px;
}
HTML
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>