Как работает flex-shrink в CSS. Подробное руководство | by Stas Bagretsov

4 min read

·

Jan 19, 2018

Flex-shrink это подсвойство, которое помогает в создании шаблона страницы с помощью Flex-box.

Оно определяет фактор “нарезки” элемента, который указывает на сколько “flex частей” будет уменьшаться элемент относительно других элементов в flex-контейнере, в тех случаях, когда для него недостаточно места в этом самом контейнере.

Когда этот параметр не указан в CSS файле, то он по-дефолту выставлен на 1 и фактор “нарезки” умножается на показатель flex-basis, когда распределяется отрицательное пространство.

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

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.

Оба flex элемента хотят быть по 20em в ширину. Из-за flex-grow(первое значение), если сам flex контейнер больше 40em, второй дочерний элемент получит вдвое больше оставшегося места, чем первый дочерний элемент. Но если родительский элемент меньше, чем 40em, тогда второй дочерний элемент будет в два раза урезан в отношении первого дочернего элемента, на фоне которого он будет смотреться меньше. Это произойдет из-за второго значения во flex, flex-shrink. В общем-то все и так понятно, но как и в случае с flex-grow, не все так просто. Давайте посмотрим как высчитывается flex-shrink.

Повторим. Если оставшееся место имеет отрицательное значение, то это означает то, что flex контейнер меньше, чем предопределенная ширина всех flex элементов. Им в этом случае придется подтянуть пояса. Назначая значения flex-shrink мы можем контролировать то, насколько места каждый flex элемент будет ужат в этом случае.

По некоторым причинам, метод работы с flex-shrink отличается от flex-grow и немного сложнее.

Как вы уже наверное догадались, flex решает буквально все проблемы раскладки во фронт-энде.

Поэтому, так как вы можете распределить дополнительное место среди всех саб-элементов, при наличии такового свободного места, вы можете также позволить им сократиться таким образом, чтобы они умещалисть в ограниченное пространство при нехватке оного.

В общем, в этом и суть flex-shrink.

Ещё раз упомянем, что возможно вы думали о том, что flex-shrink высчитывается также, как и flex-grow, но тут всё не так то просто.

Свойство flex-shrink указывает на то, насколько каждый элемент урежется при нехватке свободного места. Его стандартное значение равно 1. Множество статей просто описывают это свойство как «коэффициент сокращения элемента» и всё. Нет ни слова о том, как он высчитывается.

flex-shrink определяет только важность компонента при его сжатии, если ширина меньше.

Для примера:

Родительский элемент имеет ширину в 500px. Другие три дочерних элемента выставлены на 150px, 200px и 300px.

У flex элементов стоят flex-shrink значения 1, 2 и 3, соответственно.

Давайте сначала посчитаем переполнение элементов в контейнере: 150 + 200 + 300–500 = -150px.

Далее, эти -150px будут компенсированы сокращением на определенное количество для каждого из трех элементов.

Вычисления тут такие: каждый элемент сокращается в соответствии со своим flex-shrink, умноженным на его ширину.

В общем, общий «вес» получается таким: 1 * 150 + 2 * 200 + 3 * 300 = 1450

Значит, каждый элемент сократится так:

150 * 1(flex-shrink) * 150(width) / 1450 = -15.5

150 * 2(flex-shrink) * 200(width) / 1450 = -41.4

150 * 3(flex-shrink) * 300(width) / 1450 = -93.1

И финальные размеры будут такими:

150–15.5 = 134.5

200–41.4 = 158.6

300–93.1 = 206.9

.flex-container{display: flex; width: 500px;} .flex-item-1{ flex-basis: 150px; flex-shrink: 1;}  .flex-item-2{ flex-basis: 200px; flex-shrink: 2;}  .flex-item-3{ flex-basis: 300px; flex-shrink: 3;}
Не обращайте внимания на мелкие неточности, в виде одних сотых пикселя -это из-за размеров браузера

Примерно также, когда сумма всех 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{display: flex; width: 500px;}.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;}
Не обращайте внимания на мелкие неточности, в виде одних сотых пикселя -это из-за размеров браузера

CSS flex shrink

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Пусть второй 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-shrink29.0
21.0 -webkit-		11.028.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 Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

Свойство CSS flex-shrink

❮ Назад Полное руководство по CSS Далее ❯


Пример

Пусть второй flex-элемент уменьшится в три раза больше, чем остальные:

div:nth-of-type(2) {
  flex-shrink: 3;
}

Попробуйте сами »

Определение и использование

Свойство flex-shrink указывает, как элемент будет сжиматься относительно остальных гибких элементов внутри одного контейнера.

Примечание: Если элемент не является гибким, свойство flex-shrink не действует.

Значение по умолчанию: 1
Унаследовано: нет
Анимация: да. Читать о анимированном Попробуй
Версия: CSS3
Синтаксис JavaScript: объект . style.flexShrink=»5″ Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Числа, за которыми следует -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 Далее ❯

НАБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3.
CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

901 75 лучших примеров Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS

Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.

W3Schools работает на основе W3.CSS.

Свойство flexShrink в стиле HTML DOM

❮ Предыдущий ❮ Справочник по объектам стиля Далее ❯

Пример

Пусть синий элемент DIV уменьшится в пять раз больше, чем остальные гибкие элементы:

document.getElementById(«myBlueDiv»).style.flexShrink = «5»;

Попробуйте сами »

Описание

Свойство flexShrink указывает, как элемент будет уменьшаться относительно остальных гибких элементов внутри одного контейнера.

Примечание: Если элемент не является гибким, свойство flexShrink не действует.

Поддержка браузера

Свойство
flexShrink Да 11,0 Да 9,0 Да

Синтаксис

Вернуть свойство flexShrink:

object . style.flexShrink

Установить свойство flexShrink:

object .style.flexShrink = «number |initial|inherit»

Значения свойств 9 0017

.
Значение Описание
номер Число, указывающее, насколько элемент будет уменьшаться по сравнению с остальными гибкими элементами. Значение по умолчанию: 0
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Технические детали

Значение по умолчанию: 1
Возвращаемое значение: Строка, представляющая свойство flex-shrink элемента
Версия CSS CSS3

Связанные страницы

Ссылка CSS: свойство flex-shrink

Ссылка на СТИЛЬ HTML DOM: свойство flex

Ссылка на СТИЛЬ HTML DOM: свойство flexBasis свойство

СТИЛЬ HTML DOM Ссылка: flexFlow property

HTML DOM STYLE Ссылка: свойство flexGrow

HTML DOM STYLE Reference: свойство flexWrap

❮ Previous ❮ Справочник по объектам стиля Далее ❯

НАБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.
CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9000 3

Основные каталожные номера
Справочник по 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

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

No related posts.