flex-shrinkВластивість є суб-властивість модуля Flexible Box Layout.
Він визначає “коефіцієнт гнучкої усадки”, який визначає, наскільки гнучкий елемент зменшиться щодо решти гнучких елементів у гнучкому контейнері, коли на рядку недостатньо місця.
Коли його не вказано, для нього встановлюється значення, 1а коефіцієнт гнучкої усадки множиться на основу гнучкості при розподілі негативного простору.
Синтаксис
flex-shrink: .flex-item ( flex-shrink: 2; )Демо
Щоб побачити весь потенціал цієї демонстрації, вам потрібно було б змінити розмір її ширини, тому, будь ласка, подивіться на неї безпосередньо на CodePen.
У цій демонстрації:
- Перший елемент має
flex: 1 1 20em(скороченаflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Другий елемент має
flex: 2 2 20em(скорочення дляflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Обидва гнучкі елементи хочуть мати ширину 20em. Через гнучке зростання (перший параметр), якщо гнучкий контейнер більше 40em, друга дитина займе вдвічі більше залишку місця, ніж перша дитина. Але якщо батьківський елемент має ширину менше 40em, тоді друга дитина буде в два рази виголена з нього, ніж перша дитина, завдяки чому він буде виглядати менше (через 2-й параметр, flex-shrink).
Підтримка браузера
- (сучасний) означає останній синтаксис із специфікації (наприклад
display: flex;) - (гібрид) означає непарний неофіційний синтаксис 2011 року (наприклад
display: flexbox;) - (старий) означає старий синтаксис 2009 року (наприклад
display: box;)
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (сучасний) 20- (старий) | 3,1+ (старий) | 2-21 (старий) 22+ (новий) | 12,1+ (сучасний) | 10+ (гібрид) | 2,1+ (старий) | 3,2+ (старий) |
Браузер Blackberry 10+ підтримує новий синтаксис.
Для отримання додаткової інформації про змішування синтаксисів, щоб отримати найкращу підтримку браузера, зверніться до цієї статті (CSS-хитрощі) або цієї статті (DevOpera).