.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
flex-wrap: nowrap;
gap: 16px;
}flex flex-row justify-start items-stretch content-stretch flex-nowrap gap-4
Что такое CSS Flexbox
CSS Flexbox — одномерная система раскладки. Она выстраивает элементы вдоль одной оси, в ряд или в столбец, и управляет их выравниванием и распределением свободного места. Этим Flexbox отличается от Grid, который работает с двумя осями сразу. Раскладка задаётся свойством display: flex на контейнере, а поведение элементов задают justify-content, align-items и flex-wrap.
Как пользоваться генератором
- Выберите направление оси и способ выравнивания, раскладка сразу перестроится в предпросмотре.
- Настройте отступы
gapи перенос элементов. - Скопируйте готовый CSS или Tailwind-классы одной кнопкой.
- Вставьте код в проект, раскладка работает во всех современных браузерах.
Примеры раскладок
Навигационная панель
Логотип слева, ссылки справа. justify-content: space-between разносит элементы по краям, align-items: center выравнивает их по вертикали.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}Центрирование по обеим осям
Классическая задача «отцентрировать блок». justify-content центрирует по горизонтали, align-items по вертикали.
.box {
display: flex;
justify-content: center;
align-items: center;
min-height: 12rem;
}Адаптивные карточки
Карточки делят место поровну и переносятся на новую строку. flex: 1 растягивает их, flex-wrap разрешает перенос.
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 12rem;
}Основные свойства CSS Flexbox
Короткая шпаргалка по свойствам, которые настраивает генератор выше. Скопируйте нужное в свой CSS.
| Свойство | Что делает |
|---|---|
display: flex | Включает флекс-раскладку, и все прямые потомки становятся флекс-элементами. |
flex-direction | Основная ось. Бывает row (в ряд) или column (в столбец), плюс варианты -reverse. |
justify-content | Выравнивание вдоль основной оси: start, center, end, space-between, space-around. |
align-items | Выравнивание по поперечной оси: stretch, center, start, end, baseline. |
flex-wrap | Разрешает перенос элементов на новую строку (wrap) вместо сжатия в одну. |
gap | Отступы между флекс-элементами, по обеим осям сразу или раздельно (row/column). |
flex: grow shrink basis | Как элемент растёт и сжимается. flex: 1 занимает всё свободное место поровну. |
align-self / order | Переопределить выравнивание одного элемента или изменить его визуальный порядок. |
Flexbox или Grid: что выбрать
Правило простое. Flexbox берут для одномерных раскладок (панель кнопок, меню, ряд карточек, центрирование), Grid для двумерных (страница, галерея, дашборд). Часто их сочетают: Grid задаёт крупную структуру страницы, Flexbox выравнивает элементы внутри блоков. Для двумерных раскладок используйте генератор CSS Grid, а глубже разобраться во Flexbox поможет подробный гайд по Flexbox.