Introdução ao modelo Flexível de caixas

Caixas, caixas...

Para entender Flexbox, precisamos compreender que alguns elementos podem ser vistos como caixas, ou containers, e outros como itens desses containers.

Para começar a usar essas propriedades, adicionamos ao elemento container a propriedade display e atribuimos a ela o valor flex.

Linhas e colunas

Com o flexbox é fácil criar linhas ou colunas, usamos a propriedade flex-direction. Como valor podemos usar row, row-reverse, column, e column-reverse.

Vamos praticar?

Distribuição de espaço

Podemos definir também a distribuição de espaços entre um elemento e outro. Para isso usamos a propriedade justify-content. Essa propriedade aceita os valores flex-start, flex-end, center, space-between, space-around.

Vamos praticar?

Espalhando elementos em linha

Nossos elementos podem ocupar uma única linha em um container. Outras vezes podemos achar melhor que os elementos possam ser espalhados em linhas adicionais. Definimos esse comportamento usando a propriedade flex-wrap.

Vamos praticar?

Alinhando itens

Podemos definir o alinhamento dos elementos em relação à altura do container. Usamos a propriedade align-items, que pode receber os valores flex-start, flex-end, center, baseline, e stretch.

Alinhando multiplas linhas

Em containers com múltiplas linhas podemos usar o align-content. Enquanto align-items determina como as linhas são alinhadas dentro do container como um todo, align-content determina como múltiplas linhas devem ser espaçadas uma das outras. 

Vamos praticar?

A ordem dos itens

Se quisermos mudar a ordem do item podemos adicionar a propriedade order no item.

Vamos praticar?

Alinhando um item

Quando necessário, se preciamos alterar o alinhamento de um item, podemos usar a propriedade align-self então ele pode mudar o comportamento de alinhamento dele mesmo.

Vamos praticar?