А теперь давайте создадим ещё одно «гибкое» меню, похожее на то, что мы делали в задании прошлой части.

Напомним, что в прошлом варианте пункты равномерно распределялись внутри контейнера меню с помощью justify-content: space-around.

Новый вариант меню будет более адаптивным: пункты меню будут переноситься на следующую строку, если места будет не хватать. А ещё для достижения красивой симметрии пункты будут растягиваться, чтобы занимать весь контейнер меню. И снова нам поможет flex-grow.

Создадим базовую раскладку и зададим перенос строк.