Neste post não irei entrar em detalhes sobre cada atributo que usamos dentro do flexbox. Darei mais um conceito geral, para melhor entendermos o funcionamento.
O que é?
O Flexbox (CSS Flexible Box Layout), é um conceito do CSS3 que visa organizar elementos de uma página tornando-os "flexíveis". Ou seja independente da dimensão da tela (mobile, desketop e etc.) os elementos se reorganizarão conforme sua necessidade.
Conceito iniciais
O flexbox se resume em um conjunto de propriedades que organiza itens (elementos filhos) dentro de um container (elemento pai).
Os eixos
O flexbox lida com o layout em uma dimensão de cada vez.
Sendo assim ele lida com o eixo horizontal (row) e o eixo vertical (Column).
Através destes eixos poderemos escolher se nosso itens se moverão em direção horizontal (row) ou vertical (column).
Linhas de início e fim
Elas basicamente determinam se você quer alocar seus itens no início ou no fim do seu container.
Quebra de linha
Com flexbox também é possível fazer uma quebra de linha dentro dos nosso containers. Pois como sabemos existem diversas proporções de tela, e muitas vezes o layout inicial não se adaptará em uma tela pequena.
Para não prejudicarmos o layout e desalinhar nossos itens podemos quebrar sua linha, fazendo com que tudo se adapte.
Alinhamento, justificação e distribuição de espaço livre entre os elementos
O atributo chave do flexbox é a capacidade de alinhar e justificar os elementos nos eixos principal e transversal e distribuir o espaço entre eles, através de seus atributos.
Como podemos ver ao decorrer do texto o flexbox é um grande aliado para que possamos fazer layouts mais responsivos independente da plataforma (web / mobile).
Pretendo fazer um post mais futuramente para explicar detalhadamente cada atributo que compõem o flexbox.
Espero que tenham aproveitado a leitura e até a próxima.
Top comments (1)
Aguardo pelo próximo post!