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-itensdo 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!
