Flex-grow, Flex-basis, Flex-shrink e Flex

São aplicadas direta e individualmente aos flex items e controlam suas propriedades flexíveis.

Conceitos básicos:

• Item Flex
  Elemento filho de um container flex (display: flex)
• Tamanho do Item Flex
  Valor flexível dado ao item flex dentro do container flex
• Tamanho do Item (normal)
  Valor definido para o item, usando width ou padding, por exemplo

Resumindo as coisas, se pode entender que:

Flex-basis = “tamanho ideal”/base que um item flex deverá ter

Flex-grow = “tamanho máximo” que um item flex deve alcançar

Flex-shrink = “tamanho mínimo” que um item flex pode ficar

Flex-grow

Controla o crescimento do flex-item (além do conteúdo) para ocupar o espaço restante do flex container.

• flex-grow: 0 (padrão)
  Itens flex não crescem para ocupar o espaço restante do flex container. Sendo o limitador do menor tamanho flex de um flex-item o seu tamanho/conteúdo ou um flex-basis definido.

Todos com flex-grow: 0;

• flex-grow: número (ex: 1, 2, 3…)
  O item flex cresce (além de seu conteúdo) para ocupar o espaço restante do flex container, números maiores que 1 são usados para distribuir o crescimento proporcionalmente entre os itens flex. Por exemplo, um item flex com flex-grow: 2; cresce o dobro do que um com flex-grow: 1;

Flex-shrink

Controla a redução do flex-item quando necessária para exibir todos os itens flex sem estourar o flex container

• flex-shrink: 1; (padrão)
  O item flex se reduz para encaixar no flex container.

flex-shrink: 1; e flex-grow: 1;

• flex-shrink: 0
  Elemento flex não reduzirá seu tamanho, sendo o tamanho mínimo o flex-basis (quando definido) ou o tamanho do item (width definido ou conteúdo)

flex-shrink: 0; e flex-grow: 1;

• flex-shrink: número > 1 (ex.: 2, 3, 4…)
  São usados para distribuir a quantidade de redução proporcionalmente entre os itens flex. Por exemplo, um item flex com flex-shrink: 5; reduz 5 vezes mais do que um com flex-shrink: 1;

Antes da redução

Depois da redução

Flex-basis

Controla o tamanho base (inicial) de um item flex, sobrescreve o tamanho do item (definido por width, padding, etc.)

• flex-basis: auto; (padrão)
  O tamanho base do flex item é automático, logo será igual ao do item. Se o item não tiver tamanho especificado (definido pelo width, padding, etc.), o tamanho será conforme seu conteúdo.

Todos com flex-basis: auto; (padrão) e flex-grow: 0;

• flex-basis: número em %, em, px, etc. (ex.: 250px, 50%, etc.)
  Define um tamanho base específico, mas flexível, para o flex-item.

Primeiro flex item com flex-basis:250px; e todos com flex-grow: 0;

PS: Se precisar diminuir (com flex-shrinks: 1;), o valor do flex-basis não será o limitador do menor tamanho e sim o tamanho ou conteúdo do item

Flex item diminuiu até 50px, mesmo com flex-basis definido

• flex-basis: 0;
  Define como tamanho base do item flex o menor valor possível conforme o tamanho do item (ex: width definido) ou seu conteúdo

Primeiro flex item com flex-basis: 0;

Items flex com conteúdos diferentes, mas com mesmo tamanho (flex-basis: 0; e flex-grow: 1;)

Quando essas duas propriedades são passadas juntas ocorre um fenômeno interessante e bastante útil.

Primeiro o flex-basis: 0; define que o tamanho base do item flex seja 0, ou seja, o menor possível, ignorando/sobrescrevendo o tamanho do conteúdo do item.

Todos os itens com: flex-basis: 0; e flex-grow: 0; (padrão)

Depois o flex-grow: 1; expande em igual proporção os dois itens (já que os dois possuem o mesmo valor de flex-grow)

Todos os itens com flex-basis: 0; e flex-grow: 1;

Resultando assim em algo interessante que é dois items flex com conteúdos diferentes, mas que possuem o mesmo tamanho flex

Isso só ocorreu graças ao flex-basis: 0; ter ignorado o tamanho do conteúdo (definindo ele como 0), assim o flex-grow adicionou o espaço extra depois de forma igual nos dois items flex, como o conteúdo dos dois era tamanho 0, o tamanho final dos items flex foi igual, assim como o acréscimo do flex-grow

Veja o que aconteceria caso não fosse usado flex-basis: 0; e o tamanho do conteúdo não fosse ignorado:

Todos os itens flex com flex-basis: auto; (padrão) e flex-grow: 1;

É possível ver que o flex-grow deu aos dois acréscimos iguais, porém o tamanho final dos items flex difere e isso ocorreu devido à diferença de tamanho de seus conteúdos

Flex

É a forma resumida das três propriedades anteriores: flex-grow, flex-shrink e flex-basis

flex: [flex-grow], [flex-shrink], [flex-basis]

Sendo por padrão (caso nenhuma das três propriedades sejam definidas):

flex: 0, 1, auto;

Agora só praticar!

Caso deseje, você pode experimentar todas essas propriedades no CodePen usado para escrever esse texto:
https://codepen.io/Skiiidrow/pen/oNBagKd