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: 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;
}

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

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів