Генератор CSS Flexbox — бесплатно
Экспериментируйте с направлением, переносом, выравниванием на живых элементах — и копируйте CSS.
Визуальная flexbox-площадка: устанавливайте направление, перенос, justify-content, align-items и промежуток, меняйте количество элементов и кликните элемент, чтобы применить flex-grow. CSS обновляется в реальном времени, готов к копированию.
Совет: кликните элемент в предпросмотре, чтобы переключить flex-grow: 1 на нём.
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>🔒 Всё работает в вашем браузере — ничего не загружается.
Как это работает
Интерактивная песочница для flexbox: переключайте flex-direction, wrap, justify-content и align-items и наблюдайте, как до 10 живых элементов мгновенно перестраиваются. Щёлкните по любому элементу, чтобы задать ему flex-grow: 1 и увидеть, как он занимает пространство. CSS обновляется вживую, готов для копирования в ваш проект.
- 1Настройте контейнерНаправление, перенос, justify-content, align-items, отступ (gap).
- 2Добавьте элементыОт одного до десяти пронумерованных flex-элементов.
- 3ЭкспериментируйтеЩёлкните по элементу, чтобы переключить flex-grow, и посмотрите на эффект.
- 4Скопируйте CSSПравила контейнера (и элементов), готовые для вставки.
Всё работает в вашем браузере — ничего не загружается на сервер.
Похожие инструменты
Генератор CSS Grid
Визуально спроектируйте CSS grid — дорожки, единицы и промежутки — и скопируйте сгенерированный CSS и HTML.
Генератор CSS-градиентов
Создавайте линейные, радиальные и конические CSS-градиенты с предпросмотром в реальном времени. Копируйте CSS одним нажатием.
Генератор CSS box-shadow
Визуальный конструктор CSS box-shadow с предпросмотром, многослойным наложением, выбором цвета, переключателем inset и копированием одним нажатием. Включает пресеты Material, неоморфизм и свечение.