flex-basis

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство flex-basis указывает на размер элемента до того, как свободное место будет распределено (см. flex-grow).

Пример

Секция статьи "Пример"

При отрисовке страницы элементу с классом .item сперва будет задан размер по основной оси в 250 пикселей. Уже потом будут применяться правила роста и сжатия.

        
          
          .container {  display: flex;}.item {  flex-basis: 250px;}
          .container {
  display: flex;
}

.item {
  flex-basis: 250px;
}

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

У флекс-элементов размеры по основной и поперечной осям более приоритетны чем ширина (width) и высота (height). Это связано с идеей гибкости структуры, лежащей в основе модели флексбоксов.

Как пишется

Секция статьи "Как пишется"

Значением может быть размер в любых относительных или абсолютных единицах: 20rem, 5vw, 250px.

А также можно использовать ключевое слово auto (значение по умолчанию). В этом случае при расчёте размера элемента будут приниматься во внимание значения свойств width, max-width, min-width или аналогичные свойства высоты, в зависимости от того, в каком направлении идёт основная ось.

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

Подсказки

Секция статьи "Подсказки"

💡 Значение flex-basis более приоритетно, чем значения свойств width или height (в зависимости от направления основной оси).