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


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

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

Вказує "коефіцієнт стиснення", який визначає, на скільки елемент зменшиться відносно решти елементів у гнучкому контейнері, якщо в рядку недостатньо місця.

Якщо цей параметр опущений, його значення без задання дорівнює 1, а коефіцієнт стиснення зменшується під-час розподілу негативного місця.

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

Приймаються цілі (1, 2, 3, ...) або дробові числа (наприклад: 0.6). Негативні значення ігноруються.

Нотатка:

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

Нотатка:

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

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

Синтаксис

flex-shrink: number|initial|inherit;

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

number

Коефіцієнт стиснення гнучкого елемента в контейнері. Має бути цілим числом. Від`ємні значення заборонені.

initial

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

inherit

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

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

Переглядачі

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

29.0

11.0

28.0

9.0

12.1

13.0

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

4.4

28.0

9.2


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

Приклади


Демонстрація дії різних значень властивості

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

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

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

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