Há outra maneira para substituir WIDTH ?

Olá Wesley, tudo bem?

Primeiramente peço desculpas pela demora para responder.

O intuito do display flex é movimentar de uma forma mais flexível os flex items dentro do seu elemento pai (flex container). Para que essa movimentação seja viável é necessário termos espaço para isso, caso contrário essa dinâmica do flexbox ficará limitada. Foi exatamente o que ocorreu no caso da aula! Com a largura pequena, nenhuma propriedade que tivesse como consequência acrescentar espaços naquela caixa iria funcionar, portanto a solução foi aumentar a width.

Alternativa para substituir a width só com flexbox

A alternativa seria o flex-basis, que é uma propriedade que tem o mesmo papel de aumentar ou diminuir o tamanho de elemento flex.

Porque não foi utilizada essa alternativa?

Essa propriedade só não foi utilizada naquele momento, pois seria uma antecipação das próximas aulas, visto que é um conceito que é explorado posteriormente no curso, com definições e aplicações.

Quando utilizar o flex-basis

Em resumo, o flex-basisno flex-direction: row irá manipular a largura e no flex-direction: column irá manipular a altura de um container flex. É uma propriedade utilizada apenas no contexto do flexbox e nos restantes nós mantemos com o uso do width e height.

Caso queira saber um pouco mais sobre essa propriedade, segue a indicação de leitura.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!