Что такое Flex basis?

Что такое Flex basis?

Flex basis — это свойство CSS, которое определяет размер элемента по умолчанию перед распределением свободного пространства в контейнере Flexbox. Это как «натуральный размер» flex-элемента, от которого стартуют все расчёты.

Основные концепции

Flex basis работает вместе с двумя другими свойствами:

• flex-grow — как элемент растёт при наличии свободного пространства
• flex-shrink — как элемент сжимается при нехватке пространства

Вместе они образуют сокращённое свойство flex:

// flex: [flex-grow] [flex-shrink] [flex-basis]
flex: 1 1 300px;

// Эквивалент:
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;

Как это работает

Когда вы устанавливаете flex-basis: 300px, это означает, что элемент займёт как минимум 300px (если есть место). Затем:

1. Браузер вычисляет свободное пространство
2. Распределяет его пропорционально flex-grow
3. При нехватке места применяет flex-shrink

.container {
  display: flex;
  width: 1000px;
}

.item {
  flex-basis: 200px;  /* Начальный размер 200px */
  flex-grow: 1;       /* Растёт поровну */
}

.item:nth-child(2) {
  flex-grow: 2;       /* Растёт в два раза больше */
}

/* Если 3 элемента: 200 + 200 + 200 = 600px */
/* Свободно: 1000 - 600 = 400px */
/* Распределение: 1+1+2 = 4 части */
/* Первый: 200 + (400/4)*1 = 300px */
/* Второй: 200 + (400/4)*1 = 300px */
/* Третий: 200 + (400/4)*2 = 400px */

Специальные значения

• flex-basis: auto — размер зависит от контента (ширина/высота)
• flex-basis: 0 — игнорирует контент, элемент сжимается максимально
• flex-basis: 100% — займёт всю ширину контейнера

Практические примеры

Равные столбцы:

.column {
  flex: 1 1 0;  /* Все столбцы получат одинаковый размер */
}

Адаптивная сетка:

.card {
  flex-basis: 250px;  /* Минимальная ширина карточки */
  flex-grow: 1;       /* Растёт чтобы заполнить контейнер */
}

Важное отличие от width:

• width: 300px — строго 300px (игнорирует flex)
• flex-basis: 300px — 300px, но может измениться из-за flex-grow/flex-shrink

Это делает Flexbox очень гибким инструментом для создания адаптивных макетов без медиа-запросов.