css властивість flex-shrink
Властивість flex-shrink встановлює коефіцієнт стиснення гнучких елементів в контейнері по відношенню до інших гнучких елементів в тому ж контейнері, якщо в ньому залишається вільний простір. Гнучкі елементи автоматично зменшують свою ширину, якщо вона більша за ширину батьківського елементу.
Вказує "коефіцієнт стиснення", який визначає, на скільки елемент зменшиться відносно решти елементів у гнучкому контейнері, якщо в рядку недостатньо місця.
Якщо цей параметр опущений, його значення без задання дорівнює 1, а коефіцієнт стиснення зменшується під-час розподілу негативного місця.
У гнучкому контейнері, нащадки можуть бути розташовані у будь-якому напрямку, і можуть змінювати власні розміри: збільшувати, щоб заповнити батьківський елемент, або зменшувати, щоб не вилізти за його межі.
Приймаються цілі (1, 2, 3, ...) або дробові числа (наприклад: 0.6). Негативні значення ігноруються.
| Нотатка: | Властивість |
| Нотатка: | Рекомендується застосовувати властивість Тому що це робить стилі коротшими, зрозумілішими, а також тому, що універсальна властивість правильно скидає значення не заданих властивостей до початкового(без задання). |
Синтаксис
flex-shrink: number|initial|inherit;Властивість flex-shrink може отримувати 3 значення:
| Значення без задання: | 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 |
Мобільних переглядачів ще не додано.
Приклади
Демонстрація дії різних значень властивості
Простий приклад роботи властивості
Приклад роботи властивості
Динамічний приклад