flex-basis: базовый размер

flex-basis задаёт начальный (базовый) размер flex-элемента по главной оси до того, как браузер распределит свободное или дефицитное пространство через flex-grow и flex-shrink.

Зачем нужно

flex-basis — отправная точка расчётов Flexbox. Именно от него отсчитывается, сколько свободного пространства нужно распределить между элементами. Понимание flex-basis объясняет разницу между flex: 1 (basis=0%) и flex: 1 1 auto (basis=auto) и почему колонки иногда не получаются равными.

Где используется

  • Задание минимального размера колонки в grid-like раскладке
  • Фиксированный сайдбар: flex: 0 0 280px
  • Равные колонки независимо от контента: flex-basis: 0

Значения

.item {
  flex-basis: auto;    /* по умолчанию — размер по width/height или по контенту */
  flex-basis: 0;       /* игнорирует размер контента, делит всё пространство поровну */
  flex-basis: 200px;   /* фиксированный базовый размер */
  flex-basis: 30%;     /* процент от размера контейнера */
  flex-basis: content; /* явно по контенту (аналогично max-content) */
}

Примеры

auto — базовый размер по контенту

.container { display: flex; }
.item { flex-basis: auto; flex-grow: 1; }
/* Элементы сначала занимают место под контент,
   затем свободное пространство делится поровну */

0 — истинно равные колонки

.columns {
  display: flex;
}
.columns > * {
  flex: 1; /* эквивалент flex-grow:1; flex-shrink:1; flex-basis:0% */
  /* Все колонки одинаковы независимо от содержимого */
}

Фиксированный сайдбар

.layout {
  display: flex;
  gap: 24px;
}
.sidebar {
  flex: 0 0 260px; /* basis=260px, не растёт, не сжимается */
}
.main {
  flex: 1; /* занимает всё оставшееся пространство */
}

<div class="layout">
  <aside class="sidebar">Меню</aside>
  <main class="main">Контент</main>
</div>

Процентный basis

/* Карточки по 3 в ряд с gap */
.card {
  flex: 0 0 calc(33.333% - 16px);
}

Приоритет: basis vs width

flex-basis имеет приоритет над width (по главной оси). Если заданы оба — работает flex-basis. Исключение: min-width и max-width ограничивают результат.

.item {
  width: 200px;       /* игнорируется, если задан flex-basis */
  flex-basis: 300px;  /* используется этот */
}

Частые ошибки

  1. flex-basis: 0 vs flex-basis: auto — при 0 колонки равные; при auto равномерно делится только свободное пространство, поэтому колонки с коротким текстом оказываются уже
  2. flex-basis в shorthand flex: 1 — браузер выставляет 0%, а не auto. Если нужно auto, пишите flex: 1 1 auto
  3. flex-basis по поперечной оси — при flex-direction: column flex-basis задаёт высоту, а не ширину

Связанные темы

Ресурсы