skip to main content

flex-basis

css

Кратко 🔗

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

Пример 🔗

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

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

Автор: Алёна,