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

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

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

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

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

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

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

автор: Svitlana

Нотатка

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

автор: Svitlana

Нотатка

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

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

автор: Svitlana