Как работает свойство flex-shrink?

Как работает свойство flex-shrink

flex-shrink определяет, как flex-элемент будет сжиматься, если контейнер переполнен. Это одно из ключевых свойств Flexbox для управления размером элементов при недостатке места.

Основные концепции

1. Значение flex-shrink

/* По умолчанию - 1 (все элементы сжимаются одинаково) */
.item { flex-shrink: 1; }

/* 0 - элемент не сжимается */
.item { flex-shrink: 0; }

/* 2 - сжимается в 2 раза больше, чем элементы с 1 */
.item { flex-shrink: 2; }

2. Как работает сжатие В отличие от flex-grow, flex-shrink сжимает пропорционально размерам элементов:

<div class="container">
  <div class="item" style="width: 200px; flex-shrink: 1;">Item 1</div>
  <div class="item" style="width: 200px; flex-shrink: 2;">Item 2</div>
  <div class="item" style="width: 200px; flex-shrink: 1;">Item 3</div>
</div>

<style>
.container {
  width: 400px; /* Контейнер уже чем сумма width элементов (600px) */
  display: flex;
  overflow: hidden;
}
</style>

/*
Общая ширина элементов: 200 + 200 + 200 = 600px
Доступная ширина: 400px
Нужно сократить: 600 - 400 = 200px

Шкала сжатия: 1 + 2 + 1 = 4
Каждая единица сжатия: 200px / 4 = 50px

Item 1: 200 - (1 * 50) = 150px
Item 2: 200 - (2 * 50) = 100px
Item 3: 200 - (1 * 50) = 150px
Итого: 150 + 100 + 150 = 400px ✓
*/

3. Сравнение flex-shrink и flex-grow

/* flex-grow: распределяет ПРИ наличии свободного места */
.container {
  width: 1000px; /* Больше, чем нужно */
  display: flex;
}
.item {
  width: 100px;
  flex-grow: 1; /* Каждый элемент займёт одинаковую часть свободного места */
}

/* flex-shrink: сжимает ПРИ недостатке места */
.container {
  width: 200px; /* Меньше, чем нужно для 3 элементов по 100px */
  display: flex;
}
.item {
  width: 100px;
  flex-shrink: 1; /* Каждый элемент сожмётся пропорционально */
}

4. min-width влияет на сжатие

.container {
  width: 300px;
  display: flex;
}

.item {
  width: 200px;
  flex-shrink: 1;
}

/* Без min-width - элементы сожмутся меньше 200px */
/* С min-width - они не будут меньше 100px */
.item {
  min-width: 100px;
  flex-shrink: 1;
}

Практические примеры

1. Нежелательное сжатие - кнопка не должна сжиматься

.form-group {
  display: flex;
  width: 100%;
}

.input {
  flex: 1; /* Может расширяться и сжиматься */
  min-width: 0; /* Позволяет сжаться меньше контента */
}

.button {
  flex-shrink: 0; /* НЕ сжимается */
  margin-left: 10px;
}

2. Навигация с элементами разных размеров

.navbar {
  display: flex;
  width: 100%;
  gap: 20px;
}

.logo {
  flex-shrink: 0; /* Логотип всегда видим */
  width: 100px;
}

.search {
  flex: 1; /* Берёт все свободное место */
  min-width: 150px;
}

.menu-icon {
  flex-shrink: 0; /* Меню всегда видим */
  width: 50px;
}

3. Карточки товаров - равномерное сжатие

.products {
  display: flex;
  width: 100%;
  gap: 10px;
}

.product-card {
  flex: 1 1 300px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 300px */
  /* При недостатке места сжимаются все одинаково */
}

Формула расчёта

// Для каждого элемента:
final_width = width - (excess_space * flex_shrink * width) / total_shrink_weight

// Пример:
// Контейнер: 500px
// Элементы: 200px + 200px + 200px = 600px
// Нужно убрать: 100px
// flex-shrink: 1, 1, 1 -> всего 3
// Каждый теряет: 100 * (1/3) = 33.33px

Ошибки и их решения

/* Ошибка: текст переполняет контейнер */
.container {
  display: flex;
  width: 300px;
}
.item {
  width: 500px;
  /* По умолчанию flex-shrink: 1, но это может не помочь, если содержимое не переносится */
}

/* Решение: добавь min-width: 0 или overflow */
.item {
  width: 500px;
  flex-shrink: 1;
  min-width: 0; /* Позволяет сжаться меньше контента */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Шпаргалка

• flex-shrink: 0 - элемент НЕ сжимается (используй для кнопок, иконок)
• flex-shrink: 1 (по умолчанию) - элемент сжимается пропорционально с остальными
• flex-shrink: 2+ - сжимается в несколько раз больше других
• min-width: 0 - позволяет контенту сжаться меньше его естественного размера

flex-shrink важен для адаптивного дизайна и работы на узких экранах.