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 |
Мобільних переглядачів ще не додано.
Приклади
Демонстрація дії різних значень властивості
Простий приклад роботи властивості
Приклад роботи властивості
Динамічний приклад