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;


}

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

Зв'язок