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

Что такое flex-basis?

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

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

Когда вы задаете flex-basis, вы указываете желаемый размер элемента. Если свободного места в контейнере достаточно, элемент может увеличиться (если flex-grow > 0). Если места не хватает, элемент может уменьшиться (если flex-shrink > 0). Значение auto означает, что размер берется из width или height элемента. Если задано конкретное значение (например, 200px), оно переопределяет width/height.

Пример кода

.container {
  display: flex;
}

.item {
  flex-basis: 150px; /* начальная ширина 150px */
  flex-grow: 1;      /* может увеличиваться */
  flex-shrink: 1;    /* может уменьшаться */
}

В этом примере каждый элемент с классом .item будет иметь начальную ширину 150 пикселей. Если в контейнере останется свободное место, элементы равномерно увеличатся. Если места не хватит, они уменьшатся.

Где применяется?

flex-basis часто используется для создания адаптивных макетов, где элементы должны иметь определенный минимальный размер, но могут растягиваться или сжиматься в зависимости от доступного пространства. Например, в карточках товаров или навигационных панелях.

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