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

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

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

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

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

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

Начать с макета:

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

Контейнер .container

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

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

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

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

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

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

Минимальная высота контейнера. Без свободного места выравнивание по поперечной оси незаметно. Справочник: 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>