CSS flex-shrink Свойство
Пример
Пусть второй Flex-Item сократится в три раза больше, чем остальные:
/* Safari 6.1+ */
div:nth-of-type(2) {
-webkit-flex-shrink: 3;
}
/* Standard syntax */
div:nth-of-type(2) {
flex-shrink: 3;
}
Определение и использование
Свойство flex-shrink
указывает, как элемент будет сжиматься относительно остальных гибких элементов внутри того же контейнера.
Примечание: Если элемент не является гибким элементом, свойство flex-shrink
не имеет эффекта.
Значение по умолчанию: | 1 |
---|---|
Inherited: | no |
Animatable: | yes. Читайте о animatable |
Version: | CSS3 |
Синтаксис JavaScript: | object.style.flexShrink="5" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
flex-shrink | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
Синтаксис CSS
flex-shrink: number|initial|inherit;
Значения свойств
Значение | Описание | |
---|---|---|
number | Число, указывающее, сколько будет уменьшаться номенклатура относительно остальных гибких элементов. Значение по умолчанию равно 1 | |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Похожие страницы
CSS Справочник: CSS Flexible Box
CSS Справка: flex Свойство
CSS Справка: flex-basis Свойство
CSS Справка: flex-direction Свойство
CSS Справка: flex-flow Свойство
CSS Справка: flex-grow Свойство
CSS Справка: flex-wrap Свойство
HTML DOM Справочник: flexShrink Свойство