Разница между flex-basis, flex-grow и flex-shrink при распределении пространства между элементами заключается в следующем:

1. flex-basis определяет начальный размер элемента перед применением к нему flex-grow и flex-shrink. 1 Задаёт идеальный или предположительный размер элемента, который изменится, когда браузер упакует элемент во флекс-контейнер. 1
2. flex-grow задаёт пропорцию, по которой элементы делят контейнер. 1 Если флекс-элементам задать одинаковые положительные значения flex-grow, то они поровну поделят между собой свободное пространство. 2
3. flex-shrink отвечает за гибкость и сжатие элементов, когда доступное пространство ограничено. 2 Принимает числовое значение, которое указывает, какую долю свободного пространства элемент займёт при сжатии относительно других элементов в контейнере. 2