Como pode alterar de forma flexível os tamanhos dos…

É possível alterar de forma flexível o tamanho dos elementos no flexbox usando as propriedades flex-grow, flex-shrink e flex-basis.

flex-grow: Define até que ponto um elemento pode se expandir, ocupando o espaço livre no contêiner. O valor padrão é 0 (não se expande). Um valor mais alto indica um coeficiente de expansão maior em relação aos outros elementos.
flex-shrink: Define até que ponto um elemento pode encolher em caso de falta de espaço livre. O valor padrão é 1 (encolhe). Um valor mais alto indica um coeficiente de encolhimento maior.
flex-basis: Define o tamanho base do elemento antes da distribuição do espaço livre. Pode ser um valor fixo (px, %, rem) ou uma palavra-chave (auto, content).

Essas três propriedades são frequentemente combinadas na propriedade abreviada flex: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Exemplos de uso:

/* O elemento ocupará todo o espaço disponível */
.flex-item {
  flex-grow: 1;
}

/* O elemento não encolherá em caso de falta de espaço */
.flex-item {
  flex-shrink: 0;
}

/* O elemento tem tamanho base de 100px e se expande se houver espaço */
.flex-item {
  flex: 1 1 100px;
}

/* O elemento tem tamanho base definido pelo seu conteúdo e pode encolher */
.flex-item {
  flex: 0 1 auto; /* Equivale a flex: initial; */
}

/* O elemento não se expande nem encolhe e tem tamanho base definido pelo seu conteúdo */
.flex-item {
  flex: 0 0 auto; /* Equivale a flex: none; */
}

/* O elemento se expande, encolhe e tem tamanho base 0 (útil para criar elementos de mesma largura) */
.flex-item {
  flex: 1 1 0; /* Equivale a flex: auto; */
}

O uso dessas propriedades permite gerenciar com precisão o comportamento dos elementos dentro de um contêiner flex ao alterar o tamanho da tela ou do conteúdo.

Como pode alterar de forma flexível os tamanhos dos elementos que usam flexbox?