Свойство flex-shrink

Устанавливает коэффициент сжатия элемента контейнера flexbox 

flex-shrink: 1;
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

flex-shrink: 0;

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

Существует вероятность переполнения содержимого контейнера flexbox, если для него не задан flex-wrap: wrap;

flex-shrink: 1;

Элемент будет сжиматься при необходимости

flex-shrink: 2;

Значение flex-shrink является относительным, его поведение зависит от значения родственных элементов контейнера flexbox

Если в контейнере находятся три элемента, один из них пытается занять много пространства, у второго flex-shrink: 1; а у третьего flex-shrink: 2; Необходимое, первому элементу, пространство будет взято от элемента с flex-shrink: 2; в два раза больше чем от элемента с flex-shrink: 1;

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии