Что такое 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 отвечают за скорость роста и уменьшения объекта.