Справочник HTML & CSS

flex-shrink

Насколько сжимается flex-элемент, когда места не хватает.

Синтаксис

flex-shrink: number;

Значения

Параметр	Тип	Описание
1	number	Сжимается вместе с остальными (по умолчанию).
0	number	Не сжимается — сохраняет размер.

Примеры

Картинка, которая сохраняет ширину рядом с текстом:

<style>
  .row { display: flex; gap: 8px; width: 260px; border: 1px dashed gray; }
  .row img { width: 80px; }
</style>
 
<div class="row">
  <img src="/media/photo-200x200.jpg" alt="" style="flex-shrink: 0;">
  <p>A long text next to the image does not squeeze it, because the image has flex-shrink: 0.</p>
</div>

Примечания

flex-shrink: 0 — обычное лекарство для значков и аватарок, которые сплющиваются в ряду.

См. также

flex — Сокращённая запись того, как flex-элемент растёт, сжимается и с какого размера начинает.
flex-grow — Какую часть свободного места забирает flex-элемент.
min-width — Минимальная ширина: уже элемент стать не может.

В учебнике

Flex-элементы — Как управлять отдельными элементами во flexbox — flex-grow, flex-shrink, flex-basis, сокращение flex, align-self, order и margin auto.

Спасибо, что читаете!