Flexbox
O que é
Flexbox tem como objetivo prover uma forma mais eficiente de organizar o espaçamento dos objetos em uma interface.
. {
flex: 1;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
Propriedades do flexbox
A propriedade flex define o tamanho padrão do elemento, tendo a propriedade flex: 1 significa que o elemento estará ocupando todo o espaço disponível dentro do container,
se um container possuir 2 elementos com a propriedade flex: 1 cada elemento passa a preencher 1/2 do container (3 elementos 1/3 e por ai vai).
A propriedade flex-direction define a direção do eixo principal e pode ter os seguintes valores:
row: o eixo se moverá na direção de lista.row-reverse: mesma direção dorowporém invertida.column: o eixo se moverá na direção de pilha.column-reverse: mesma direção docolumnporém invertida.
A propriedade justify-content define o alinhamento ao eixo principal, ajudando na distribuição do espaçamento entre os itens do container.
flex-start: alinha os itens ao inicio da direção definida.flex-end: alinha os itens ao final da direção definida.center: alinha os itens ao centro do container.space-between: alinha os itens e define os espaçamento da forma que o primeiro item esteja no inicio da direção e o ultimo item no final.space-evenly: alinha os itens de forma que o espaçamento entre os itens seja o mesmo (incluindo as pontas).
A propriedade align-items define o comportamento de como os itens são distribuídos no eixo transversal.
stretch: alonga os itens para preencher o container.flex-start: alinha os itens ao inicio do eixo.flex-end: alinha os itens ao final do eixo.center: alinha os itens ao centro do eixo.
Por padrão os itens dentro de um container flex serão exibidos em apenas uma linha, você pode mudar esse comportamento adicionando a propriedade flex-wrap.
nowrap: todos os itens do container ficarão em uma linhawrap: se necessário ao chegar no tamanho máximo do container ocorrerá uma quebra de linha para os próximos itens.
Como usar
Para começar a usar o flex é preciso apenas definir um container flex, para fazer isso basta adicionar a propriedade display: flex na tag.