Como usar Flex-Box?

O Flex-Box é um modelo de layout web do CSS que pode facilitar o processo de estilização tornando os elementos filhos flexíveis dentro do elemento pai o que facilita processos que antes eram bem mais complicados de serem feitos como:

• Centralizar
• Alinhamento
• modelagem

Para usar o Flex Box usamos a propriedade display com o valor flex de seguinte maneira:

display: flex

Agora vou listar algumas outras propriedades fundamentais para usar o flex box e uma breve descrição:

• flex-direction: – muda a disposição dos elementos filhos dentro do elemento pai.

• justify-content: – essa propriedade ela faz o alinhamento do eixo principal que é definido com o flex-direction:.

• align-itens: – já essa cuida de alinhar o eixo secundário que no caso é o oposto ao principal.

• flex-wrap: – ela vai definir a questão de quebra de de linha no caso quando os elementos filhos ultra pação o espaço do elemento pai ele é redirecionado para a próxima linha.

Estas propriedades devem ser implementada no elemento pai já as que vou citar agora deve ser colocadas no elemento filho:

• flex-shrink: – ela possibilita o elemento diminuir de tamanho de acordo com o limite especificado.

• flex-grow: – semelhante ao anterior ela possibilita o elemento aumentar de tamanho.

• order: – ira alterar a ordem do elemento de acordo a posição definida.

• flex-self: – esse vai sobrepor a propriedade align-itens do elemento pai para a definida pelo elemento filho.

Para finalizar vou colocar as propriedade com seus valores mais comuns:

• flex-direction: row | row-reverse | column | column-reverse

• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

• align-itens: stretch | flex-start | flex-end | center | baseline

• flex-wrap: nowrap | wrap | wrap-reverse

• flex-shrink: 1 | 2 | 3 | ...

• flex-grow: 1 | 2 | 3 | ...

• order: 1 | 2 | 3 | ...

• flex-self: stretch | flex-start | flex-end | center | baseline

Esse foi o básico de flex-box Obrigado pela atenção!