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 (в зависимости от направления основной оси).

Поддержка в браузерах:
  • Chrome 57, поддерживается
  • Edge 79, поддерживается
  • Firefox 81, поддерживается
  • Safari 9, поддерживается
О Baseline