В чем разница между flex-basis и flex-grow/flex-shrink при распределении пространства между элементами?

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

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