Flexbox

É necessário entender o que acontece quando definidos que um elemento deve se

tornar flexível:
Se temos um container e elementos dentro dele que são block-level, e não tivermos
definido nenhuma largura para eles, eles serão posicionados um debaixo do outro e
ocuparão toda a largura disponível.
Ao mudarmos o display para flex, eles ficarão posicionados lado a lado, em linha ou
coluna, e sua largura será determinada pela largura do conteúdo!
Ele usa a largura do conteúdo e não mais o 100% do espaço disponível, porque essa
é uma característica do display: block e não do flex!

Para fazer um elemento ficar flexível, use:

display: flex;
Seus filhos-diretos automaticamente se tornarão itens flexíveis.

PROPRIEDADES DO CONTAINER FLEXÍVEL

flex-direction
Define a direção e o sentido que o container empilhará os itens flexíveis.
Valores:
row Padrão. Itens empilhados na horizontal (da esquerda pra direita).
row-reverse Itens empilhados na horizontal (da direita pra direita).
column Itens empilhados na vertical (de cima para baixo).
column-reverse Itens empilhados na vertical (de baixo para cima).

flex-wrap
Define se os itens flexíveis podem descer (quebrar) para outra linha.
Valores:
nowrap Padrão. Os itens serão espremidos, mas não quebrarão a linha.
wrap Os itens quebrarão a linha, se necessário.
wrap-reverse Os itens quebrarão a linha, se necessário, em ordem reversa.

flex-flow
É um atalho para definir o flex-direction e o flex-wrap de uma só vez. Exemplo:
.flex-container {
display: flex;
flex-flow: row wrap; /* Primeiro o flex-direction, depois o flex-wrap */
}

justify-content
Define o alinhamento horizontal dos itens flexíveis.
Valores:
flex-start Padrão. Itens alinhados no começo do container.
center Itens alinhados ao centro do container.
flex-end Itens alinhados no fim do container.
space-around Alinha os elementos com espaços antes, no meio e depois dos itens.
space-between Alinha os elementos com espaços entre os itens.

align-items
Define o alinhamento vertical dos itens flexíveis.
Valores:
flex-start Alinha os itens no topo do container.
center Alinha os itens no meio do container.
flex-end Alinha os itens no parte de baixo do container.
stretch Padrão. Estica os itens para preencher o container verticalmente.
baseline Alinha os elementos tomando como base sua baseline.

align-content
Define o alinhamento das linhas dos itens (quando quebra a linha com wrap).
Valores:
space-between Alinha as linhas com espaço entre elas.
space-around Alinha as linhas com espaço antes, no meio e depois.
stretch Padrão. Estica as linhas fazendo-as preencher o espaço disponível.
center Alinha as linhas no meio do container.
flex-start Alinha os elementos no começo do container.
flex-end Alinha os elementos no final do container.

PROPRIEDADES DOS ITENS FLEXÍVEIS

As propriedades dos Itens Flexíveis servem basicamente para:
 Alterar a ordem dos itens;
 Definir a largura deles;
 Definir o quanto eles crescerão quando tem espaço disponível;
 Definir o quanto eles encolherão quando não tiver espaço disponível;
 Definir o alinhamento individual de cada um dos itens.
Sobre a largura dos itens, é necessário entender que definimos
explicitamente a largura dos elementos com width ou com flex-basis. Se não tiver
nenhuma dessas propriedades definindo a largura, então a largura do elemento será
definida pelo seu conteúdo.
É necessário entender também o conceito de Espaço Disponível.
order
Altera a ordem de exibição dos itens flexíveis.
No geral os itens aparecem na ordem em que eles estão definidos no código.
Altere a ordem utilizando números inteiros. Pode ser usado números negativos.
Os itens aparecerão em ordem crescente.
O valor padrão é 0!

FLEX-GROW E FLEX-SHRINK
É importante saber que essas propriedades é pra quando o container não pode
quebrar de linha, que aí sim terá a necessidade de organizar o espaço. Se puder
quebrar a linha, essas propriedades não terão nenhum efeito.

flex-grow
Define o quanto um item flex irá crescer, se tiver espaço disponível.
Soma-se os valores da propriedade flex-grow e divide-se o espaço disponível por
esse número. Atribui-se uma porção do espaço disponível proporcionalmente entre
os itens flex de acordo com o valor da propriedade flex-grow.
Se um item tiver flex-grow: 1 e o outro tiver flex-grow: 2, o espaço disponível será
dividido em 3, o primeiro item ficará com 1/3 do espaço disponível e o segundo item
com 2/3.
Valores especiais:
Padrão. O elemento não crescerá, mesmo com espaço disponível.
0
Usará somente o espaço do seu conteúdo.
Se nenhum outro item tiver com flex-grow, ele ocupará todo o restante
1
do espaço disponível.

flex-shrink
Define o quanto um item flex irá encolher, se não tiver espaço disponível.

flex-basis
flex

OBS: É recomendado que você use essa propriedade ao invés de usar as

propriedades de forma individual!

align-self
Permite alterar o alinhamento padrão (ou aquele definido por align-itens) em itens
flex de forma individual.
Os valores disponíveis são os mesmos do align-itens:
flex-start Alinha os itens no topo do container.
center Alinha os itens no meio do container.
flex-end Alinha os itens no parte de baixo do container.
stretch Padrão. Estica os itens para preencher o container verticalmente.
baseline Alinha os elementos tomando como base sua baseline.

OBS: Saiba que float, clear e vertical-align não funcionam com itens flex.