Свойство flex-shrink | Справочник HTML CSS
Устанавливает коэффициент сжатия элемента контейнера flexbox
flex-shrink: 1;
Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
flex-shrink: 0;
Элемент не будет уменьшаться, он сохранит нужную ему ширину и не будет переносить содержимое, если размеры элемента не заданы. Его родные братья сократятся, чтобы освободить место для целевого элемента.
Существует вероятность переполнения содержимого контейнера flexbox, если для него не задан flex-wrap: wrap;
<style> .example-1 { display: flex; outline: 2px dashed #ccc; } .example-1-item { padding: 5px; margin: 2px; background: #8ee391; } .shrink-0 { width: 330px; flex-shrink: 0; } </style> <div> <div>текст текст текст</div> <div>текст текст</div> <div>текст</div> </div>
текст текст текст
текст текст
текст
flex-shrink: 1;
Элемент будет сжиматься при необходимости
<style> . example-2 { display: flex; outline: 2px dashed #ccc; } .example-2-item { flex-shrink: 1; padding: 5px; margin: 2px; background: #8ee391; } </style> <div> <div>текст текст текст текст текст текст</div> <div>текст текст текст текст текст текст</div> <div>текст текст текст текст текст текст</div> </div>
текст текст текст текст текст текст
текст текст текст текст текст текст
текст текст текст текст текст текст
flex-shrink: 2;
Значение flex-shrink является относительным, его поведение зависит от значения родственных элементов контейнера flexbox.
Если в контейнере находятся три элемента, один из них пытается занять много пространства, у второго flex-shrink: 1; а у третьего flex-shrink: 2; Необходимое, первому элементу, пространство будет взято от элемента с
<style> . example-3 { display: flex; outline: 2px dashed #ccc; } .example-3-item { flex-shrink: 0; padding: 5px; margin: 2px; background: #8ee391; } .shrink-1 { flex-shrink: 1; } .shrink-2 { flex-shrink: 2; } </style> <div> <div>текст текст текст текст текст текст</div> <div>текст текст текст текст текст текст</div> <div>текст текст текст текст текст текст</div> </div>
текст текст текст текст текст текст
текст текст текст текст текст текст
текст текст текст текст текст текст
Читайте также
Обсуждение (0)
flex-shrink | CSS | WebReference
- Содержание
- Краткая информация
- Синтаксис
- Значения
- Пример
- Примечание
- Спецификация
- Браузеры
Устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшаться по отношению к другим флексам, чтобы разместить все элементы в одну строку.
Значение по умолчанию | 1 |
---|---|
Наследуется | Нет |
Применяется | К флекс-элементам |
Анимируется | Да |
Синтаксис
flex-shrink: <число>
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
Принимаются целые (1, 2, 3,…) или дробные числа (например: 0.6). Отрицательные значения игнорируются.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>flex-shrink</title> <style> .flex-container { display: flex; } .flex1 { flex-shrink: 3; margin-right: 2rem; } . flex1 img { width: 100%; } .flex2 { flex-shrink: 2; } </style> </head> <body> <div> <div><img src=»image/aquaria.jpg» alt=»»></div> <div>Понравились готовые инсталляции, некоторые даже без рыбок смотрятся так, что хочется фотографию на рабочий стол поставить и любоваться.</div> </div> </body> </html>
Примечание
Safari до версии 9 поддерживает свойство -webkit-flex-shrink.
Спецификация
Спецификация | Статус |
---|---|
CSS Flexible Box Layout Module Level 1 | Возможная рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
11 | 13 | 29 | 12.1 | 6.1 | 9 | 28 |
4.4 | 28 | 12.1 | 7.1 | 9.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Флексы
См. также
- Макет сайта на флексбоксах
- Свойства flex-элементов
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 24.04.2020
Редакторы: Влад Мержевич
Свойство CSS flex-shrink
❮ Назад Полное руководство по CSS Далее ❯
Пример
Пусть второй flex-элемент уменьшится в три раза больше, чем остальные:
div:nth-of-type(2) {
flex-shrink: 3;
}
Попробуйте сами »
Определение и использование
Свойство flex-shrink
указывает, как элемент будет сжиматься относительно остальных
гибких элементов внутри одного контейнера.
Примечание: Если элемент не является гибким, свойство flex-shrink
не действует.
Значение по умолчанию: | 1 |
---|---|
Унаследовано: | нет |
Анимация: | да. Читать о анимированном Попытайся |
Версия: | CSS3 |
Синтаксис JavaScript: | объект |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.
Собственность | |||||
---|---|---|---|---|---|
гибкий термоусадочный | 29,0 21,0 -вебкит- | 11,0 | 28. 0 18.0 -моз- | 9.0 6.1 -вебкит- | 17,0 |
Синтаксис CSS
flex-shrink: number |initial|inherit;
Значения свойств
Значение | Описание | Играй |
---|---|---|
номер | Число, указывающее, насколько элемент будет уменьшаться по сравнению с остальными гибкими элементами. Значение по умолчанию 1 | Играй » |
начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальный | Играй » |
унаследовать | Наследует это свойство от родительского элемента. Читать о унаследовать |
Связанные страницы
Учебник по CSS: CSS Flexible Box
Справочник по CSS: свойство flex
Справочник CSS: свойство flex-basis
Справочник CSS: свойство flex-direction
Справочник CSS: свойство flex-flow
Справочник CSS: свойство flex-grow
Справочник CSS: свойство flex-wrap : свойство flexShrink
❮ Предыдущий Полное руководство по CSS Далее ❯
НОВИНКА
Мы только что запустили
Видео W3Schools
Узнать
ВЫБОР ЦВЕТА
КОД ИГРЫ
Играть в игру
Лучшие учебники
Учебник HTMLУчебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9003 900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
гибкая термоусадочная | CSS-трюки — CSS-трюки
DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!
Свойство flex-shrink
является подсвойством модуля Flexible Box Layout.
Указывает «коэффициент сокращения гибкости», который определяет, насколько элемент гибкости будет уменьшаться по отношению к остальным элементам гибкости в контейнере гибкости, когда в строке недостаточно места.
.элемент { гибкая термоусадка: 2; }
Если этот параметр опущен, он устанавливается равным 1
, а коэффициент гибкости умножается на базис гибкости при распределении отрицательного пространства.
Синтаксис
flex-shrink:
Демонстрация
Чтобы увидеть весь потенциал этой демонстрации, вы должны иметь возможность изменять ее ширину, поэтому, пожалуйста, взгляните на нее непосредственно на CodePen.
В этой демонстрации:
- Первый элемент имеет
flex: 1 1 20em
(сокращение отflex-grow: 1
,flex-shrink: 1
,flex-basis: 20em
) - Второй элемент имеет ,
flex-shrink: 2
,flex-basis: 20em
)
Оба flex-элемента должны иметь ширину 20em. Из-за flex-grow (первый параметр), если flex-контейнер больше 40em, второй дочерний элемент займет в два раза больше остаточного пространства, чем первый дочерний элемент. Но если родительский элемент имеет ширину менее 40em, то у второго дочернего элемента будет вдвое больше, чем у первого дочернего элемента, что сделает его меньше (из-за второго параметра, flex-shrink).
Поддержка браузера
- (современный) означает последний синтаксис из спецификации (например,
display: flex;
) - (гибрид) означает странный неофициальный синтаксис 2011 года (например,
display: flexbox;
( - 4 )
4 old) means the old syntax from 2009 (e. g.display: box;
)
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
10+ | All | 20+ | 22+ | 8+ | 12.1+ |
iOS | Chrome Android | Firefox Android | Android | Opera Mobile |
---|---|---|---|---|
8+ | ALL | ALL | 92+ | 12,1+ |