Что такое flex-shrink?

Что такое flex-shrink и чем оно отличается от flex-grow?

Flex-shrink - это противоположность flex-grow.

Flex-grow определяет насколько блоку можно увеличиться, следовательно, flex-shrink - насколько можно уменьшиться.

Используется flex-shrink когда элементы не помещяются в контейнер при уменьшении экрана. Можно определить это свойство для каждого объекта в контейнере, и когда контейнер будет уменьшаться - будут уменьшаться и все объекты внутри.

Они все заменяются одним свойством Flex.

flex: (grow, shrink, auto):

.my-object {
flex: (0 0 auto);//Этот объект не будет увеличиваться, не будет уменьшаться, и его размер будет определён автоматически.
}

Простыми словами flex-grow и flex-shrink отвечают за скорость роста и уменьшения объекта.