Flex container e flex items

A propriedade flex-grow vista no exercício anterior ajuda muito caso queiramos que um elemento ocupe toda a largura restante do flex container.

Por exemplo, se temos:

Elemento 1: 200 px.

Elemento 2: 200 px.

Espaço vazio que sobrou do flex container: 600 px.

Total: 1000 px.

Se colocamos flex-grow: 1 no primeiro elemento, ele passa a ter 800 px de largura, ou seja:

Espaço vazio + Elemento 1: 800 px.

E o segundo elemento continua tendo 200 px de largura.

Agora, se colocarmos flex-grow: 1 nos dois elementos, o que aconteceria? Qual tamanho ficaria o elemento 1? E o elemento 2?

O que aconteceria é o seguinte:

Considere o espaço vazio inicial: 600 px.

Como os dois elementos tem flex-grow: 1, a soma de flex-grow que temos vai dar 1 + 1 = 2.

O navegador pega esse espaço vazio e divide pelo número de flex-grow que temos: 600 px : 2 = 300 px.

Agora ele distribui esse espaço para cada um dos elementos que colocamos flex-grow.

Elemento 1: 300 px + 200 px = 500 px.

Elemento 2: 300 px + 200 px = 500 px.

No caso para video na página que nao queremos que reduza de tamanho.

Colocamos flex-shrink: 0 no nosso elemento que não queremos que diminua.

Caso contrário:

1) Quando diminuimos a tela para 600 px os flex-item diminuem seu tamanho igualmente entre si, ou seja, como a tela diminuiu 200 px e temos 4 flex items, cada um diminuiu 50 px. Sendo assim cada flex-item ficou com 150 px no fim.

2) Quando colocamos flex-shrink: 2 no primeiro, ele diminui de forma diferente do que os outros elementos. As contas que ocorrem são semelhantes as que ocorrem no flex-grow.

Primeiro de tudo o navegador pega o total de flex-shrink que nossos flex items tem, como temos por padrão flex-shrink: 1 nos flex items, a conta fica assim:

2 + 1 + 1 + 1 = 5. Isso pois o primeiro colocamos flex-shrink:2.

Como diminuímos 200 px do tamanho total, o navegador pega esse valor e divide pelo total de flex-shrink. Fica: 200 px : 5 = 40 px.

Dessa forma o navegador tira 2 partes do primeiro elemento 200px - 80px = 120px e tira 1 parte dos demais, ou seja: 200 px - 40 px = 160 px

A propriedade flex-basis serve para definir uma largura ou altura para o flex item. Se o flex container tiver com flex-direction: column, o flex-basis no flex item servirá para definir uma height. Caso o flex-direction: row, ele funciona como um width.

A propriedade flex que usamos para condensar as propriedades flex-grow, flex-shrink e flex-basis.

Podemos usar a propriedade flex. A sintaxe fica simples assim:

Podemos usar a propriedade flex. A sintaxe fica simples assim:

flex: 1 1 300px;

A ordem dos valores é:

flex-grow, flex-shrink, flex-basis

Oi Talilo, tudo bem?

Isso aí! Parabéns por fazer esse resumo do que viu nas aulas :D. Indico você ter uma cópia desse resumo na sua máquina, para que você possa dar uma olhada quando quiser relembrar alguns conceitos.

Bons estudos.

Um abraço.