Гибкое сжатие (flex shrink)

Flex shrink – это свойство в CSS, которое определяет, как флекс элемент будет уменьшаться в размере при недостатке свободного пространства внутри его контейнера. Оно определяет, на сколько элемент будет сжиматься по сравнению с другими элементами внутри контейнера, если не хватает места.

Значение flex shrink задается числом, которое представляет коэффициент сжатия. Чем больше значение, тем больше элемент будет сжиматься. Если значение flex shrink равно 0, элемент не будет сжиматься и будет сохранять свой исходный размер. Положительные значения flex shrink будут рассматриваться в отношении других элементов внутри контейнера. Например, если элемент A имеет flex shrink равный 1, а элемент B имеет flex shrink равный 2, то элемент B будет сжиматься в два раза быстрее, чем элемент A.

Давайте рассмотрим пример кода, где используется flex shrink:

HTML:

<div class="container">
  <div class="item">Элемент A</div>
  <div class="item">Элемент B</div>
  <div class="item">Элемент C</div>
</div>

CSS:

.container {
  display: flex;
}

.item {
  flex: 1 1 auto;
  background-color: lightblue;
  margin: 5px;
}

В данном примере у нас есть контейнер с тремя элементами, которые имеют класс "item". У каждого элемента задана общая доля пространства равная 1 и одинаковый размер auto, что позволяет им занимать одинаковое пространство в контейнере. Если внутри контейнера не хватает места, например, при уменьшении окна браузера, элементы будут сжиматься.

Теперь давайте добавим свойство flex shrink к элементам:

.item {
  flex: 1 1 100px;
  background-color: lightblue;
  margin: 5px;
}

В этом случае, элементы будут сжиматься только после достижения их минимальной ширины, которая задана в 100 пикселей. Если при уменьшении размера контейнера до сжатия элементов остается место больше 100 пикселей, они не будут сжиматься.

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

Надеюсь, данный развернутый ответ помог вам понять принцип работы свойства flex shrink и его применение в CSS.