English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Свойство flex-shrink CSS определяет способ сжатия flex-элемента по сравнению с другими элементами в flex-контейнере.
В таблице приведено описание использования и историю версий этого свойства, а также синтаксис использования в скриптах JavaScript.
| Значение по умолчанию: | 1 |
|---|---|
| Применяется к: | Эластичные элементы |
| Инherit: | нет |
| Анимировано: | Да.См. также Анимационные свойства. |
| Версия: | Новая функция CSS3 |
| JavaScript синтаксис: | объект.style.flexShrink="5" |
Синтаксис этого свойства следующий:
flex-shrink: number | initial | inherit
Ниже приведен пример того, как использовать свойство flex-shrink.
.flex-container {
display: flex;
}
.item1 {
width: 100px;
background: #ff80c0;
-webkit-flex-shrink: 1; /* Safari 6.1+ */
flex-shrink: 1;
}
.item2 {
width: 100px;
background: #8080ff;
-webkit-flex-shrink: 3; /* Safari 6.1+ */
flex-shrink: 3;
}
.item3 {
width: 100px;
background:#0080ff;
-webkit-flex-shrink: 5; /* Safari 6.1+ */
flex-shrink: 5;
}Проверьте, посмотрите ›/‹В таблице ниже описаны значения этого свойства.
| Значение | Описание |
|---|---|
| number | Положительное число, определяющее коэффициент эластичности flex-shrink эластичного элемента. Значение по умолчанию - 1. Отрицательные числа недопустимы. |
| initial | Установить этот параметр в его значение по умолчанию. |
| inherit | Если указано, то связанные элементы используют значение flex-shrink родительского элемента. |
Совместимость браузеров для свойства flex-shrink, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.
|
Узнайте больше из следующих руководств:CSS3 многостраничная разметка.
Связанные свойства:align-content,align-items,align-self,display,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-wrap,justify-content,min-height,min-width,order.