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

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

Свойство flex-shrink является одним из свойств CSS3.

INFO

При распределении отрицательного пространства коэффициент flex-shrink умножается на flex-basis (или на размер содержимого элемента, если flex-basis равен auto).

Начальное значение	1
Применяется к	Flex-элементы, включая псевдоэлементы в потоке.
Наследуется	Нет.
Анимация	Да. Элементы можно анимировать.
Версия	CSS3
Синтаксис DOM	object.style.flexShrink = "4";

Синтаксис

Синтаксис свойства CSS flex-shrink

css

flex-shrink: number | initial | inherit;

Пример свойства flex-shrink:

Пример свойства CSS flex-shrink со значением числа

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 1px dotted #666666;
        display: flex;
      }
      .box div {
        flex-grow: 1;
        flex-shrink: 3;
        flex-basis: 100px;
      }
      .box div:nth-of-type(2) {
        flex-shrink: 7;
      }
    </style>
  </head>
  <body>
    <h2>Flex-shrink property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #cccccc;"></div>
      <div style="background-color: #666666;"></div>
    </div>
  </body>
</html>

Try it Yourself »

Результат

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

Значения

Значение	Описание	Запустить
number	Определяет, насколько элемент будет уменьшаться относительно остальных гибких элементов того же контейнера. Значение по умолчанию — 1.	Запустить »
initial	Устанавливает свойству его значение по умолчанию.	Запустить »
inherit	Наследует это свойство от родительского элемента.

Практика

Какова функция свойства 'flex-shrink' в CSS?

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

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

Синтаксис ​

Пример свойства flex-shrink: ​

Результат ​