flex-basis

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