Свойство flex-shrink
Свойство flex-shrink определяет то, насколько flex-блок будет уменьшаться относительно соседних элементов внутри flex-контейнера в случае недостатка свободного места.
Например, если все flex-блоки внутри flex-контейнера имеют flex-shrink: 1 , то они будут одинакового размера. Если один из них имеет flex-shrink: 2 , то он будет в 2 раза больше, чем все остальные.
Применяется к: конкретному flex блоку.
Данное свойство входит как составная часть в свойство-сокращение flex .
Синтаксис
Значение по умолчанию: 1 .
Пример
Пусть у нас есть 3 элемента. Ширина каждого из них составляет 200px и суммарно равна 600px , что больше ширины родительского контейнера, которая равна 350px :
.parent < display: flex; width: 350px; height: 200px; border: 1px solid red; >.child < width: 200px; height: 50px; border: 1px solid green; >.elem1 < flex-shrink: 1; >.elem2 < flex-shrink: 2; >.elem3 < flex-shrink: 3; >
Давайте рассчитаем отрицательное свободное пространство по формуле:
600px — 350px = 250px
Суммарная взвешенная ширина элементов с учетом значений свойства flex-shrink для каждого элемента будет равна:
200px * 1 + 200px * 2 + 200px * 3 = 1200px
Теперь определим насколько сократится первый элемент:
250px * 1 (flex-shrink) * 200 (width) / 1200 = 41, 6px
250px * 2 (flex-shrink) * 200 (width) / 1200 = 83, 3px
250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px
Выходит, что третий элемент, у которого значение flex-shrink равно 3 сократится больше других элементов.
Смотрите также
- свойство flex-direction ,
которое задает направление осей flex блоков - свойство justify-content ,
которое задает выравнивание по главной оси - свойство align-items ,
которое задает выравнивание по поперечной оси - свойство flex-wrap ,
которое многострочность flex блоков - свойство flex-flow ,
сокращение для flex-direction и flex-wrap - свойство order ,
которое задает порядок flex блоков - свойство align-self ,
которое задает выравнивание одного блока - свойство flex-basis ,
которое задает размер конкретного flex блока - свойство flex-grow ,
которое задает жадность flex блоков - свойство flex-shrink ,
которое задает сжимаемость flex блоков - свойство flex ,
сокращение для flex-grow, flex-shrink и flex-basis
Как работает flex-shrink в CSS. Подробное руководство
Flex-shrink это подсвойство, которое помогает в создании шаблона страницы с помощью Flex-box.
Оно определяет фактор “нарезки” элемента, который указывает на сколько “flex частей” будет уменьшаться элемент относительно других элементов в flex-контейнере, в тех случаях, когда для него недостаточно места в этом самом контейнере.
Когда этот параметр не указан в CSS файле, то он по-дефолту выставлен на 1 и фактор “нарезки” умножается на показатель flex-basis , когда распределяется отрицательное пространство.
��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️
#Синтаксис
flex-shrink: .flex-item
#Демо
Чтобы увидеть, как это всё происходит на наглядном, живом примере, вам нужно самим изменять размер ширины контейнеры. Поэтому зайдите свои параметры на CodePen и поиграйтесь с шириной окна.
Примерно также, когда сумма всех flex-shrink всех элементов меньше 1, вычисления будут другими:
Тут он не будет сокращать всё место, а только обрежет место в соотношении flex-shrink к значению 1 .
Тот же самый пример, но flex-shrink значения у каждого элемента будут изменены на 0.1 , 0.2 и 0.3 , соответственно.
Тогда общий «вес» будет 145 (просто в 10 раз меньше, формулу пропускаем).
Все три элемента сокращаются не на 150px, а только на 150px (0.1 + 0.2 + 0.3) / 1 или на 60% всего места: 90px.
Место на которое нарезается каждый элемент:
90 * 0.1(flex-shrink) * 150(width) / 145 = 9.31
90 * 0.2(flex-shrink) * 200(width) / 145 = 24.83
90 * 0.3(flex-shrink) * 300(width) / 145 = 55.86
И конечная ширина элементов:
150–9.31 = 140.69
200–24.83 = 175.17
300–55.86 = 244.14
Конечно же, как и на flex-grow , min-width влияет на flex-shrink .
.flex-container .flex-item-1< flex-basis: 150px; flex-shrink: 0.1;>.flex-item-2< flex-basis: 200px; flex-shrink: 0.2;>.flex-item-3< flex-basis: 300px; flex-shrink: 0.3;>
flex — shrink
Если в контейнере не хватает места для расположения всех элементов без изменения размеров, то свойство flex — shrink указывает, в каких пропорциях элемент будет уменьшаться.
Свойство flex — shrink полностью противоположно свойству flex — grow .
Пример
Скопировать ссылку «Пример» Скопировано
.container display: flex;> .item flex-shrink: 3;>.container display: flex; > .item flex-shrink: 3; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Чем больше значение у этого свойства, тем быстрее элемент будет сжиматься по сравнению с соседями, имеющими меньшее значение.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Значение по умолчанию — 1. Значением может быть любое целое положительное число (включая 0).
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Свойство работает с пропорциональным разделением пространства, не с конкретными размерами элементов. Разобраться во всём поможет статья «Как реально работает flex — shrink ».
Полный список свойств флексбоксов можно посмотреть в гайде по flexbox.
- Chrome 57, поддерживается 57
- Edge 79, поддерживается 79
- Firefox 81, поддерживается 81
- Safari 9, поддерживается 9
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Чаще всего в работе используется flex — shrink : 0 . Это нужно чтобы элементы не сжимались, игнорируя заданные размеры.
flex-shrink
Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.
flex-shrink — свойство CSS, которое определяет фактор сжатия flex-элемента. Flex-элементы будут заполнять контейнер в зависимости от значения flex-shrink , когда стандартная ширина flex-элементов шире, чем flex-контейнер.
flex-shrink используется вместе со свойствами flex flex-grow и flex-basis . Обычно определяется с помощью сокращения flex .
Интерактивный пример
Синтаксис
/* значения */ flex-shrink: 2; flex-shrink: 0.6; /* Глобальное значение */ flex-shrink: inherit; flex-shrink: initial; flex-shrink: unset;
flex-shrink свойство определятся одним .
Значения
Формальный синтаксис
flex-shrink =
Пример
HTML
p>Ширина контента 500px; flex-basis для flex элементов 120px.p> p>A, B, C имеют flex-shrink:1 значение. А у D и E - flex-shrink:2p> p>Ширина D и E меньше других.p> div id="content"> div class="box" style="background-color:red;">Adiv> div class="box" style="background-color:lightblue;">Bdiv> div class="box" style="background-color:yellow;">Cdiv> div class="box1" style="background-color:brown;">Ddiv> div class="box1" style="background-color:lightgreen;">Ediv> div>
CSS
#content display: flex; width: 500px; > #content div flex-basis: 120px; border: 3px solid rgba(0, 0, 0, 0.2); > .box flex-shrink: 1; > .box1 flex-shrink: 2; >
Результат
Спецификации
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-shrink-property |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.