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 oflex-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 propriedadealign-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!