css.in.ua
Підтримати

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

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

Нотатка:

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

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

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

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

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

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

Синтаксис

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

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

number

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

auto

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

initial

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

inherit

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

Значення без задання: auto
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.flexBasis="200px"

Переглядачі

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

29.0

11.0

28.0

9.0

12.1
Переглядач
flex-basis

4.4

28.0

9.2

Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Приклад роботи властивості

Різні значення у дії

Простий приклад

Ширина другого контейнера буде 80 пікселів.

div:nth-of-type(2) {


    -webkit-flex-basis: 80px; /* Safari 6.1+ */


    flex-basis: 80px;


}

Додаткові посилання

Документи

Зв'язок