Загрузка...
Загрузка...
Found a bug, outage, or unexpected behavior in reChecker? Send us a message and we will check and fix it.
With a subscription — no extra charge. Paid Site Control from 990 ₽/mo includes local tools with unlimited manual runs. The volume limit for each run is shown on the tool page. Paid AI features and API integrations are charged separately.
View subscriptionИнтерактивная песочница для изучения и визуализации Flexbox
.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 — интерактивный инструмент для изучения и экспериментов с CSS Flexbox. Настраивайте свойства контейнера и элементов, наблюдайте результат в реальном времени и копируйте готовый код.
Визуальная настройка justify-content, align-items, flex-direction
Управление flex-grow, flex-shrink, flex-basis
Мгновенный предпросмотр изменений
Экспорт готового CSS-кода
Flexbox (Flexible Box Layout) — это модель разметки в CSS для создания гибких одномерных макетов. С его помощью легко выравнивать элементы по горизонтали или вертикали, распределять пространство между ними и управлять порядком отображения. Flexbox особенно удобен для навигационных меню, карточек и центрирования контента.
Guides and tips for this topic