Это 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)
Оба гибких элемента должны быть шириной 20 мкм. Из-за flex-grow (первый параметр), если размер гибкого контейнера превышает 40em, второй дочерний элемент займет в два раза больше оставшегося места, чем первый дочерний элемент. Но если родительский элемент имеет ширину менее 40em, то второй дочерний элемент будет иметь вдвое больше стружки, чем первый дочерний элемент, что сделает его меньше (из-за второго параметра, flex-shrink).
Поддержка браузера
- (современный) означает последний синтаксис из спецификации (например
display: flex;) - (гибрид) означает странный неофициальный синтаксис 2011 года (например
display: flexbox;) - (old) означает старый синтаксис 2009 года (например
display: box;)
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (современный) 20- (старый) | 3.1+ (старые версии) | 2-21 (старые) 22+ (новые) | 12.1+ (современный) | 10+ (гибрид) | 2.1+ (старая версия) | 3.2+ (старые) |
Браузер Blackberry 10+ поддерживает новый синтаксис.
Для получения дополнительной информации о том, как смешивать синтаксисы, чтобы получить лучшую поддержку браузера, обратитесь к этой статье (CSS-Tricks) или этой статье (DevOpera).