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

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

Властивість flex дозволяє вказати параметри елемента, щоб він ефективно заповнював доступний простір. Елементи можуть бути розтягнуті пропорційно з урахуванням заданого співвідношення або стиснуті, щоб цілком вмістити всі елементи без переносів в один рядок.

Властивість `flex`

Властивість flex — універсальна властивість, яка дозволяє одночасно задати наступні значення:

  • flex-grow
  • flex-shrink
  • flex-basis

У гнучкому контейнері, нащадки можуть бути розташовані у будь-якому напрямку, і можуть змінювати власні розміри: збільшуватися, щоб заповнити батьківський елемент, або зменшуватися, щоб не вилізти за його межі.

За змовчуванням нащадки не можуть бути меншими, ніж їхній вміст. Щоб змінити це, використовуйте властивості min-width i max-width.

Нотатка:

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

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

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

Синтаксис

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

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

flex-grow

Число, яке вказує пропорції флекс елемента всередині контейнера.

flex-shrink

Число, яке вказує коефіцієнт стиснення флексів в контейнері.

flex-basis

Початкова довжина елемента. Можна вибрати зі значень auto, inherit, %, px, em або будь-яку іншу одиницю виміру довжини

auto

Те ж, що й 1 1 auto

initial

Те ж, що й 0 1 auto

none

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

inherit

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

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

Переглядачі

Переглядач
flex

29.0
21.0 -webkit-

11.0
10.0 -ms-

28.0
18.0 -moz-

9.0
6.1 -webkit-

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

4.4

28.0

9.2

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

Приклади


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

Проста демонстрації дії влативості

Різні значення властивості

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

Всі гумові елементи будуть однакової довжини, незалежно від їх змісту.

#main div {


    -webkit-flex: 1; /* Safari 6.1+ */


    -ms-flex: 1; /* IE 10 */ 


    flex: 1;


}

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

Документи

Зв'язок