Що робить flex-basis?

CSSJunior~1 хв читання

flex-basis задає початковий розмір flex-елемента вздовж головної осі, перед тим як будуть застосовані flex-grow і flex-shrink.

Тобто це «базова ширина» (або висота, якщо flex-direction: column), з якої елемент стартує в розрахунках.

Приклади:

css

.item {
  flex-basis: 200px; /* елемент спочатку займає 200px */
}

Якщо flex-direction: row → flex-basis працює як ширина. Якщо flex-direction: column → flex-basis працює як висота.

Особливі випадки:

javascript

flex-basis: auto;   /* розмір береться з width/height або вмісту (типова поведінка) */
flex-basis: 0;      /* ігнорувати контент і ділити вільне місце лише за flex-grow */

Коротко: flex-basis - це стартовий розмір flex-елемента до розподілу вільного простору.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.