Генератор CSS Flexbox

Свойства контейнера

Свойства элемента

Трюк flex: 1

flex: 1, это shorthand для flex: 1 1 0%. Делает элемент таким:

• Растёт, заполняя доступное пространство (grow: 1)
• Сжимается при необходимости (shrink: 1)
• Стартует с нулевого размера (basis: 0%)

Для колонок одинаковой ширины flex: 1 на каждом элементе даёт идеальное деление. Для сайдбаров, которые не должны сжиматься меньше контента, используйте flex: 0 0 240px (без grow, без shrink, basis 240px).

Частые паттерны

Центрированный hero

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Навбар с лого слева и ссылками справа

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* push right */
  display: flex;
  gap: 1rem;
}

Адаптивный ряд карточек

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* grow/shrink, 260px minimum before wrapping */
}

Поле формы с кнопкой (input гибкий, кнопка фиксированная)

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox против Grid

• Flexbox: одно измерение (строка ИЛИ колонка). Лучше, когда размеры элементов диктуются контентом или когда вы распределяете пространство вдоль одной линии.
• Grid: два измерения (строки И колонки с явными треками). Лучше, когда макет одновременно имеет строковую и колоночную структуру.

Для навбара или стека карточек, Flexbox. Для сетки карточек товаров с несколькими рядами выровненных карточек, CSS Grid. Многие реальные страницы используют оба, Grid для верхнего макета и Flexbox внутри компонентов.

Частые подводные камни

• Элементы не заполняют контейнер: дефолт align-items: stretch действует, только если у элементов нет фиксированной высоты. С явной высотой они остаются того же размера.
• gap не работает: проверьте поддержку браузера. Flex gap появился поздно; Safari <14.1 его не поддерживал. Сейчас (2024+), повсеместная поддержка.
• Дети flex-колонки схлопываются: у flex-колонки дефолт align-items: stretch, который растягивает элементы до ширины контейнера. Если один ребёнок задаёт width, он вылезает.
• order, только визуально: скринридеры и навигация с клавиатуры идут по DOM-порядку. Не используйте order, чтобы добиться осмысленности контента; используйте только для визуального лоска.