CSS Flexbox playground

Нажимайте на свойства Flexbox и смотрите, как блоки перестраиваются в реальном времени — затем скопируйте CSS контейнера. Быстрый способ освоить flex и получить нужный код. Ничего никуда не отправляется.

flex-direction

justify-content

align-items

flex-wrap

Отступ12px

Количество элементов5

Живой просмотр

CSS контейнера

Всё работает в вашем браузере. Без загрузки, без регистрации.

Как это работает

STEP 1

Выберите свойства

Нажмите flex-direction, justify-content, align-items и wrap. Потяните ползунки gap и количества элементов.

STEP 2

Смотрите живой просмотр

Блоки мгновенно перестраиваются, так что вы сразу видите, что делает каждое свойство Flexbox.

STEP 3

Скопируйте CSS

Получите чистый CSS контейнера одним кликом или скачайте .css-файл — ничего не загружается.