Перейти к содержанию

flex-shrink

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

Демо

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

Синтаксис

1
2
3
4
5
6
7
flex-shrink: 2;
flex-shrink: 0.6;

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

Значения

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

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

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

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

<число>

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

Примечание

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

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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>

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

См. также

Комментарии