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

Определение и применение

Свойство flex-shrink задаёт коэффициент сжатия Flexbox-элемента, когда суммарный базовый размер элементов превышает доступное место.

При распределении нехватки места коэффициент умножается на базовый размер. В контейнере шириной 300px элементы с базами 200px и 400px должны освободить 300px. При одинаковом flex-shrink: 1 они теряют 100px и 200px, то есть в отношении 1:2. Итоговые размеры — 100px и 200px, если ограничения размеров не вмешиваются.

Автоматический минимальный размер может помешать сжатию. Для горизонтальной главной оси часто нужен min-width: 0; для вертикальной — min-height: 0.

В контейнер шириной 300px нужно поместить два элемента с flex-basis 200px и 400px. У обоих flex-shrink: 1. Не хватает 300px. Веса сжатия равны 1 умножить на 200 и 1 умножить на 400, то есть 1 к 2. Первый уступает 100px, второй 200px. Итоговые ширины — 100px и 200px. Минимальные размеры не мешают сжатию.
При одинаковом flex-shrink: 1 более крупный элемент теряет больше пикселей. Здесь задано min-width: 0, нет отступов и рамок.

Связанные свойства: flex, flex-direction.

Подробнее об осях и размерах — в учебнике: Flexbox: контейнер и Flexbox: элементы.

В генераторе Flexbox можно настроить контейнер и размеры его элементов и получить готовый CSS.

Попробуйте значения flex-shrink

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

Значение свойства

flex-shrink: 0

HTML и CSS примера
HTML
<div class="stage">
  <div class="item">1</div>
  <div class="item demo-target">2</div>
  <div class="item">3</div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  flex-shrink: 0;
}
.item {
  width: 130px;
}

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

Спецификация: CSS flexbox

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьcss.properties.flex-shrink
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
flex-shrink✓29✓12✓20✓12.1✓9✓29✓20✓12.1✓9✓2.0✓4.4✓9

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис

CSS
flex-shrink: <number [0,∞]>;

/* Глобальные значения */
flex-shrink: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. Квадратные скобки группируют варианты; внутри типа задают допустимый диапазон. Типы в угловых скобках обозначают допустимые значения из таблицы или соответствующих составляющих.

JavaScript:

JavaScript
element.style.flexShrink = "3";

Начальное значение свойства

1.

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

Значения flex-shrink
Значение Описание
<number> Неотрицательный коэффициент. 0 отключает сжатие по алгоритму Flexbox; положительное значение разрешает его. Это не количество пикселей и не процент.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства flex-shrink устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Flexible Box Layout — спецификация flex-shrink.

Наследуется

Нет.

Анимируемое

Как число.

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

Уменьшение элементов через flex-shrink

Измените коэффициент сжатия второго элемента с 3 на 1. Контейнер уже суммы базовых размеров, поэтому элементы сжимаются.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

.container {
    color: white;
}

.container div:nth-of-type(1) {
    background: orange;
}

.container div:nth-of-type(2) {
    background: brown;
}

.container div:nth-of-type(3) {
    background: tan;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Уменьшение флекс элементов в CSS</title>
  </head>
  <body>
    <p>Подвигайте блоки за нижний правый край для демонстрации:</p>
    <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
    </div>
  </body>
</html>
style.css
CSS
.container {
    width: 250px;
    height: 100px;
    display: flex;
    overflow: auto;
    resize: horizontal;
}

.container div:nth-of-type(1) {
    flex-basis: 150px;
    flex-shrink: 1;
}

.container div:nth-of-type(2) {
    flex-basis: 150px;
    flex-shrink: 3;
}

.container div:nth-of-type(3) {
    flex-basis: 150px;
    flex-shrink: 1;
}

Сжатие разных базовых размеров

Исходно базы равны 200px и 100px, контейнер — 240px. При одинаковом flex-shrink: 1 получаются 160px и 80px. Поменяйте коэффициент второго элемента на 2: потери станут одинаковыми.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color-scheme: light dark;
    background: Canvas;
    color: CanvasText;
}
.item {
    min-width: 0;
    padding: 0;
    overflow-wrap: anywhere;
    outline: 1px solid #447a9b;
    background: light-dark(#e4f0f8, #293e50);
}
.container {
    outline: 1px dashed;
}
section {
    margin-bottom: 24px;
}
h2 {
    font-size: 16px;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Сжатие разных базовых размеров</title>
  </head>
  <body>
    <div class="container">
      <div class="item">A</div>
      <div class="item target">B</div>
    </div>
  </body>
</html>
style.css
CSS
.container {
    display: flex;
    width: 240px;
}
.item {
    flex: 0 1 200px;
    min-width: 0;
}
.target {
    flex-basis: 100px;
    flex-shrink: 1;
}