Utilizando CSS Flexbox (Flex Itens)

Nesta aula, você verá algumas propriedades para os itens de um contêiner flex. Ou seja, as propriedades desta aula devem ser aplicadas aos itens e não ao contêiner, como as vistas até aqui.

flex-grow

O "flex-grow" é uma propriedade que controla o tamanho dos itens e como se comportarão em relação ao tamanho da tela. Trata-se de um valor numérico em que o valor padrão é o 0. No caso de todos os itens possuírem "flex-grow" 0, indica que ocuparão apenas a área suficiente para apresentar seu conteúdo. Se o valor diferir de 0, o espaço total será dividido de forma a respeitar a proporção estabelecida por cada valor de "flex-grow".

flex-shrink

A propriedade "flex-shrink" especifica como o item será reduzido em relação ao restante dos itens flexíveis no mesmo contêiner. Trata-se de um valor numérico que possui 1 como valor padrão.

flex-basis

A propriedade "flex-basis" especifica o comprimento inicial de um item flexível. Trata-se de um valor numérico que pode ser definido em pixels.

flex

O atributo "flex" é um atalho para todos os outros atributos vistos nesta aula. Acompanhe o exemplo abaixo:

section > div {
  flex: 0 1 auto;
}

No exemplo acima, a propriedade flex foi configurada com "flex-grow" com valor "0", o "flex-shink" com valor "1" e o "flex-basis" com valor "auto". Perceba que a ordem é fundamental.

Ainda é possível uma sintaxe ainda mais enxuta. Acompanhe o exemplo:

section > div {
  flex: 1;
}

Nesse caso, o "flex-grow" e o "flex-shink" ficam com valor "1" e o "flex-basis" com valor "0".

Para praticar os conceitos, visite este site.