css властивість flex-basis

Властивість flex-basis визначає початкову довжину гнучкого елемента, яка є його початковим розміром. Вона також може визначати розміри блоку, якщо не прописана спеціальна властивість box-sizing. Задає початковий розмір, перед тим як вільний простір гнучкого контейнера розподіляється між іншими нащадками. flex-basis може приймати такі ж самі значення як і width та height (ключові слова auto і content в тому числі). Зверніть увагу, що від'ємні значення довжини недійсні.

правити

Порада

Якщо для властивості задати одне чи два ключових слова, flex-basis автоматично змінює своє значення з auto до 0.

автор: NagarD правити

Порада

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

Тому що це робить стилі коротшими, зрозумілішими, а також тому, що універсальна властивість правильно скидає значення не заданих властивостей до початкового (без задання).

автор: NagarD правити

Нотатка

Властивість flex працює тільки зі гнучкими елементами, тобто з тими елементами, у котрих властивість display встановлена як flex (display: flex; або display: inline-flex).

автор: NagarD правити

Нотатка

flex-basis: auto; іншими словами означає "дивися на мою висоту і ширину".

автор: NagarD правити

Нотатка

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

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

flex-basis: number|auto|initial|inherit;

Властивість flex-basis може отримувати 4 значень:

number

Задає ширину елемента в px, mm, pt або у відсотках. Від'ємне значення заборонене.

автор: NagarD

правити

auto

Браузер самостійно розмір елемента опираючись на його вміст. Значення без задання.

автор: NagarD

правити

initial

Встановлює цю властивість в значення без задання

автор: NagarD

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
flex-basis	29.0	28.0	9.0	12.1	11.0

Підтримка: мобільні переглядачі

Переглядач
flex-basis	4.4	28.0	9.2

Приклади

+ запропонувати свій приклад у пісочниці

<div class="row">
    <div>120px</div>
    <div>80px</div>
    <div>120px</div>
</div>

.row {
    display: flex;
}

.row div {
    flex: 0 0 120px;
    padding: 8px;
    border: 1px solid #0172ad;
}

.row div:nth-of-type(2) {
    flex-basis: 80px;
    background: #eef6ff;
}