Flexbox Playground
Интерактивная песочница для изучения и визуализации Flexbox
Container
Items (3)
Превью
CSS код
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 10px;
height: 300px;
}Шпаргалка
justify-content
Выравнивание по главной оси
align-items
Выравнивание по поперечной оси
flex-grow
Растягивание элемента (0 = нет)
flex-basis
Базовый размер до распределения
О сервисе Flexbox Playground
Flexbox Playground — интерактивный инструмент для изучения и экспериментов с CSS Flexbox. Настраивайте свойства контейнера и элементов, наблюдайте результат в реальном времени и копируйте готовый код.
Часто задаваемые вопросы
Flexbox (Flexible Box Layout) — это модель разметки в CSS для создания гибких одномерных макетов. С его помощью легко выравнивать элементы по горизонтали или вертикали, распределять пространство между ними и управлять порядком отображения. Flexbox особенно удобен для навигационных меню, карточек и центрирования контента.
Flexbox работает в одном измерении — строке или колонке, тогда как Grid предназначен для двумерных макетов (строки и колонки одновременно). Flexbox идеален для выравнивания элементов внутри контейнера, центрирования и распределения пространства. Grid лучше подходит для сложных сеток с фиксированными колонками и строками.
Используйте display: flex на родителе, затем justify-content: center и align-items: center. Это классический способ центрирования без margin и позиционирования. Для центрирования по вертикали на всю высоту экрана добавьте min-height: 100vh к flex-контейнеру.
flex-grow определяет, во сколько раз элемент может увеличиться относительно других при наличии свободного места. flex-shrink — насколько элемент может сжаться при нехватке пространства. Значение 0 для flex-shrink запрещает сжатие, что полезно для фиксированных сайдбаров.
Современный Flexbox поддерживается во всех актуальных браузерах, включая IE 11 (с префиксами и ограничениями). Для IE 10 и ниже потребуются полифиллы или альтернативная разметка. В 2025 году доля браузеров без поддержки Flexbox минимальна.
Полезные статьи
Руководства и советы по теме
Связанные инструменты
Другие полезные сервисы reChecker