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

flex-basis определяет начальный размер flex-элемента до распределения свободного пространства. Это базовая ширина (или высота, если flex-direction: column) элемента до применения flex-grow или flex-shrink.

Особенности:

• Может принимать значения auto, content, или конкретные размеры (px, %, em и т.д.).
• При flex-basis: auto размер зависит от содержимого или явно заданного width/height.
• Если flex-basis: 0, элемент игнорирует свой контент при распределении пространства.

Пример:

.item {
  flex-basis: 200px; /* Начальная ширина 200px */
}

В сочетании с flex-grow: 1 элемент начнёт растягиваться от 200px.