Flex Grow
Define a capacidade do item de crescer quando há espaço disponível no contêiner.
flex-grow: 0; → O item não cresce (padrão).
flex-grow: 1; → O item cresce e ocupa o espaço disponível.
flex-grow: 2; → O item cresce duas vezes mais que os itens com flex-grow: 1
Flex Shrink
Determina a capacidade do item de encolher quando o espaço é reduzido.
flex-shrink: 0; → O item não encolhe.
flex-shrink: 1; → O item pode encolher se necessário (padrão).
flex-shrink: 2; → O item encolhe duas vezes mais rápido que os com flex-shrink: 1
Flex basis
Define o tamanho inicial do item antes da distribuição do espaço disponível.
Pode ser um valor fixo (px, em, %, etc.) ou auto.
flex-basis: auto; → O tamanho do item é baseado no conteúdo (padrão).
flex-basis: 100px; → O item começa com 100px antes do ajuste.
Flex
A propriedade flex é um atalho (shorthand) que define três propriedades de um item flexível.
flex: flex-grow flex-shrink flex-basis;
Exemplos Práticos
Se eu delimitar meu flex-basis: 300px e por flex-shrink:0 vai ocorrer que os itens irão sumir da área principal da interface do usuário caso esse tenha uma tela menor que 900px. Para comprovar isso só basta testar o flexbox da página reduzindo o tamanho da aba. Com isso você notará que o elemento C estará com uma parte desaparecida.
Nesse caso o flex-grow será igual 1 e o flex-shrink seria igual a 1 também, logo o item irá crescer e diminuir se adequando totalmente ao espaço que lhe é distribuído
Mas o que ocorre se apena 1 elemento conter o flex-grow:1 e os outros tiverem o flex-grow:0 ?
Acontece que somente o elemento que tem flex-grow:1 irá crescer.
No exemplo seguinte foi aplicado um flex-grow:2 o que demonstra que o elemento escolhido crescerá duas vezes mais rápido.