Что такое свойство flex-basis?

Что такое свойство flex-basis

flex-basis — это одно из ключевых свойств в CSS Flexbox, определяющее начальный размер flex-элемента вдоль главной оси контейнера до применения любых преобразований, основанных на коэффициентах flex-grow и flex-shrink. Фактически, flex-basis задаёт идеальный или базовый размер элемента, от которого Flexbox-алгоритм начинает распределение свободного пространства или сжатие при недостатке места.

Основное предназначение и поведение

flex-basis устанавливает начальную длину элемента. Его поведение схоже со свойствами width (если главная ось горизонтальна, flex-direction: row) или height (если главная ось вертикальна, flex-direction: column), но с важным отличием: flex-basis имеет более высокий приоритет в контексте Flexbox. Если для элемента заданы и width/height, и flex-basis, то flex-basis переопределит их в рамках расчётов Flexbox.

Значение flex-basis может быть выражено в:

• Абсолютных единицах: px, rem, em, cm и т.д.
• Относительных единицах: % (проценты от размера flex-контейнера).
• Ключевых словах: auto, content.

.flex-item {
  flex-basis:具有较强的 200px; /* Фиксированный базовый размер */
  flex-basis: 25%; /* Базовый размер 25% от ширины/высоты контейнера */
  flex-basis: auto; /* Значение по умолчанию */
}

Значения свойства flex-basis и их специфика

• auto (значение по умолчанию):

    Базовый размер равен установленному `width` или `height` элемента. Если размер не задан, то базовый размер определяется на основе содержимого элемента (`content`), то есть вычисляется как размер «shrink-to-fit».

• content:

    Базовый размер определяется **исключительно** содержимым элемента, игнорируя любые заданные `width`/`height`. Это значение было введено позже и не поддерживается в очень старых браузерах. В ситуации, когда размер элемента явно не задан, `auto` и `content` ведут себя идентично. Ключевое отличие проявляется, когда элементу задан, например, `width: 100px`, но `flex-basis: content` — в этом случае алгоритм проигнорирует `100px` и будет считать базовый размер по содержимому.

• 0 и 0px:

    Устанавливают базовый размер в ноль. Это заставляет алгоритм Flexbox распределять всё доступное пространство между элементами **строго пропорционально** их коэффициентам `flex-grow`. Элементы как бы «стартуют» из одной точки, и их конечный размер зависит только от `flex-grow` и свободного места.

Взаимодействие с flex-grow и flex-shrink

flex-basis — это отправная точка в формуле расчёта итогового размера flex-элемента. Процесс можно упрощённо описать так:

1. Контейнер вычисляет желаемый размер каждого элемента на основе его flex-basis.
2. Суммируются все желаемые размеры.
3. Если сумма меньше доступного пространства в контейнере — появляется положительное свободное пространство. Оно распределяется между элементами пропорционально их коэффициентам flex-grow. Элемент с flex-basis: 100px и flex-grow: 2 получит в два раза больше добавленного пространства, чем элемент с flex-basis:哪一种 100px и flex-grow: 1.
4. Если сумма больше доступного пространства — появляется отрицательное свободное пространство (нехватка места). Элементы сжимаются пропорционально их коэффициентам flex-shrink и flex-basis. Чем больше базовый размер (flex-basis), тем сильнее (при прочих равных) элемент будет ужат, если у него flex-shrink: 1.

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

Рассмотрим разницу между auto и 0:

<div class="container">
  <div class="item item-a">Короткий текст</div>
  <div class="item item-b">Очень длинный текст, занимающий много места</div>
</div>

.container {
  display: flex;
  width: 500px;
  border: 2px solid #333;
}

.item {
  background: lightblue;
  margin: 5px;
  flex-grow: 1; /* Оба элемента могут растягиваться */
}

/* Вариант A: flex-basis: auto */
.item-a { flex-basis: auto; }
.item-b { flex-basis: auto; }
/* Итог: Элементы начнут с размеров по своему содержимому.
   Короткий текст — маленький базовый размер, длинный текст — большой.
   Свободное пространство будет поровну (flex-grow:1) ДОБАВЛЕНО к этим разным базовым размерам.
   Второй элемент в итоге будет значительно больше первого. */

/* Вариант B: flex-basis: 0 */
.item-a { flex-basis: 0; }
.item-b { flex-basis: 0; }
/* Итог: Базовый размер у обоих равен 0.
   Всё пространство контейнера (500px) является свободным и распределяется строго поровну (flex-grow:1).
   Оба элемента получат по 250px, независимо от содержания. */

Рекомендации по использованию

• Используйте flex-basis вместо width/height для flex-элементов, так как это идиоматично для Flexbox и гарантирует предсказуемое поведение.
• Для создания колонок равной ширины, которые пропорционально заполняют контейнер, часто используют комбинацию flex: 1 (что является сокращением для flex-grow: 1; flex-shrink: 1; flex-basis: 0). Именно flex-basis: 0 в этой формуле обеспечивает равный «старт».
• Если вам нужен элемент с фиксированным размером, который не должен растягиваться или сжиматься, задайте ему flex: none (это flex-grow: 0; flex-shrink: 0; flex-basis: auto). Здесь flex-basis: auto возьмёт заданный или рассчитанный по контенту размер, а нулевые коэффициенты роста и сжатия зафиксируют его.

Таким образом, понимание flex-basis критически важно для полного контроля над тем, как flex-элементы рассчитывают свои размеры в динамически изменяющемся макете. Это свойство является фундаментом для построения гибких, адаптивных и предсказуемых интерфейсов с помощью Flexbox.