flex-shrink¶

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

Flexbox и выравнивание

Руководство по Flexbox

Синтаксис¶

flex-shrink: 2;
flex-shrink: 0.6;

/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;

Значения¶

Значение по-умолчанию: 1

Наследуется: нет

Применяется к флекс-элементам

Анимируется: да

<число>: Принимаются целые числа. Отрицательные значения игнорируются.

Примечание¶

Safari до версии 9 поддерживает свойство -webkit-flex-shrink.

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

CSS Flexible Box Layout Module

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

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

Описание и примеры¶

HTML

<!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 class="flex-container">
      <div class="flex-item flex1">
        <img src="aquaria.jpg" alt="" />
      </div>
      <div class="flex-item flex2">
        Понравились готовые инсталляции, некоторые даже без
        рыбок смотрятся так, что хочется фотографию на
        рабочий стол поставить и любоваться.
      </div>
    </div>
  </body>
</html>

Результат

Понравились готовые инсталляции, некоторые даже без рыбок смотрятся так, что хочется фотографию на рабочий стол поставить и любоваться.

См. также¶

Руководство по Flexbox