DEV Community

Cover image for Entendendo o Flexbox
Priscila Oliveira
Priscila Oliveira

Posted on

3 1

Entendendo o Flexbox

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).

Explicação conceitual de como é composto os elementos do flexbox

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).

Imagem descritiva de como funcionam os eixos principais do do flexbox (row e 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.

Descrição do conceito de inicio e fim de um 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.

Explicação do conceito de quebra de linha do flexbox

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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
gw1803 profile image
Gabriel Almeida

Aguardo pelo próximo post!

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more