Служба поддержки

Отвечаем по вопросам инструментов и оплат

📦

Flexbox песочница

Изучите CSS Flexbox интерактивно

Flexbox-песочница — интерактивное изучение CSS Flexbox

Интерактивная flexbox-песочница помогает изучить все свойства CSS Flex Layout: `display: flex`, `flex-direction`, `justify-content`, `align-items`, `align-content`, `flex-wrap`, `gap`, и свойства дочерних элементов — `flex-grow`, `flex-shrink`, `flex-basis`, `order`, `align-self`. Меняете параметр — сразу видите, как перестраивается контейнер.

Песочница полезна для верстальщиков и frontend-разработчиков, которые только осваивают Flexbox, или забыли разницу между `flex-start` и `stretch`. Сгенерированный CSS можно скопировать вместе с Tailwind-эквивалентом (`flex justify-between items-center`) или Bootstrap-классами (`d-flex justify-content-between`).

Поддерживаются все современные браузеры (flexbox работает с IE 11 с небольшими оговорками по `gap`). Есть готовые пресеты: хедер с логотипом и меню, карточки в ряд с переносом, центрирование по вертикали и горизонтали, sticky footer.

✓Все свойства Flex — Контейнер и items — полный набор флекс-свойств в одной панели.
✓Живое превью — Перестроение контейнера в реальном времени при смене любого параметра.
✓Tailwind + Bootstrap — Экспорт готовых классов для Tailwind и Bootstrap, а не только чистый CSS.
✓Пресеты вёрстки — Хедер, карточки, центрирование, sticky footer — одной кнопкой.
✓Шпаргалка — Описание каждого свойства с допустимыми значениями и эффектом.

📋

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

1
Настройте контейнер: direction, justify-content, align-items, gap.
2
Добавьте или удалите элементы, меняйте им flex-grow и order.

Встройте на свой сайт

Бесплатный виджет с бэклинком на ваш сайт

⭐Рейтинг и отзывы

Загрузка…

flex-direction

flex-wrap

justify-content

align-items

gap: 10px

Элементов: 5

CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}

При необходимости включите wrap и настройте align-content.

Скопируйте CSS, Tailwind или Bootstrap-классы.

✨

Возможности

🚀

Все свойства Flex

Контейнер и items — полный набор флекс-свойств в одной панели.

🔒

Живое превью

Перестроение контейнера в реальном времени при смене любого параметра.

⚡

Tailwind + Bootstrap

Экспорт готовых классов для Tailwind и Bootstrap, а не только чистый CSS.

🎯

Пресеты вёрстки

Хедер, карточки, центрирование, sticky footer — одной кнопкой.

💎

Шпаргалка

Описание каждого свойства с допустимыми значениями и эффектом.

🎯

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

▸Сверстать хедер: логотип слева, меню справа
▸Центрировать элемент по вертикали и горизонтали
▸Карточки товаров с переносом на новую строку
▸Sticky footer, прижатый к низу страницы
▸Равномерно распределить иконки в тулбаре
▸Горизонтальный скролл с nowrap для галереи
▸Форма с label и input в одной строке

📦

Что поддерживается

display: flex / inline-flex
flex-direction: row | column
justify-content / align-items / align-content
flex: grow shrink basis
Tailwind flex-утилиты

💡

Полезные советы

💡

Для лучших результатов используйте современный браузер (Chrome, Firefox, Edge)

🎯

Все файлы обрабатываются локально в вашем браузере для максимальной безопасности

⚡

Сохраняйте результат сразу после обработки

🔑

Попробуйте разные настройки для оптимального результата

❓

Часто задаваемые вопросы

Flexbox — одномерный: выстраивает элементы в строку ИЛИ колонку. CSS Grid — двумерный: одновременно управляет строками и колонками. Для хедеров, меню и тулбаров удобнее Flex; для сложных макетов страницы (sidebar + content + right panel) — Grid.

Justify-content выравнивает по главной оси (main axis), align-items — по перпендикулярной (cross axis). При `flex-direction: row` main axis горизонтальный, при `column` — вертикальный.

Добавьте этому элементу `flex: 1` (или `flex-grow: 1`). Остальные элементы сохранят свой размер, а он растянется на свободное пространство.

Chrome 84+, Firefox 63+, Safari 14.1+, Edge 84+ — да. Для более старых версий используйте margin на дочерних элементах.

`display: flex; justify-content: center; align-items: center;` на родителе. В Tailwind: `flex items-center justify-center`.

🔎