4

Entenda Flexbox parte 1

#CSS
Anna Maria
Anna Maria

O que é Flexbox


"O Flexbox é um conceito do CSS3 que visa organizar os elementos de uma página HTML dentro de seus containers de forma dinâmica. Ou seja, independente das suas dimensões eles sempre manterão um layout flexível dentro do seu elemento pai, reorganizando-se e acordo com a necessidade."


Propriedades do Flexbox


1 - Display: Flex


Irei explicar o conceito de Display: Flex comparando ele com o Display: Block(o padrão).

Vamos supor que você tem um container com 4 quadrados dentro, todos esses quadrados por padrão são Display block. A partir do momento que você diz que o container é Display Flex:

#container {
  display: flex;
}

É isso que acontece:

Como pode observar, agora os 4 quadrados são Display: Inline, ou seja, permanecem na mesma linha.


2 - Flex Direction


Um contêiner Flexbox tem dois eixos: um eixo principal(Main) e um eixo cruzado(Cross), assim:

Image for post

Por padrão, os itens são organizados ao longo do eixo principal(Main), da esquerda para a direita. É por isso que os quadrados assumiram como padrão uma linha horizontal depois que o display: flex foi aplicado.


A Flex direction permite que você gire o eixo principal(Main). Faz com que o próprio eixo principal passe de horizontal para vertical.

Assim: Image for post

Flex-diretion: row é o padrão que se mantem na horizontal, enquando a Flex-diretion: column faz com que os quadrados passem para a vertical.


Também temos a Flex-diretion: column reverse e a Flex-diretion: row reserve.

Flex-diretion: columm reverse: Inverte a ordem dos itens na vertical.

diretion: row reserve: inverte a ordem dos itens na horizontal.

Image for post


📢 Parte 2 amanhã


Espero ter ajudado 💞

 

Alguns dos meus artigos anteriores:

💫 Ensinando a ter um servidor e um domínio GRÁTIS com GitHubPages

💫Sites para fazer download gratuito de ícones

💫Melhores extensões para trabalhar no Visual Studio Code

💫Melhores temas do Visual Studio Code

💫Como usar Font Awesome

💫 Como colocar ícone ou logo do seu site na barra de endereço do navegador

💫 Como usar imagens e gifs nos seus artigos da DIO

💫 O que você precisa saber para começar a ser um(a) desenvolvedor(a) freelancer


______________________________________________________________________________________

Olá, meu nome é Anna Maria eu sou uma desenvolvedora Front-End.

Me desafiei a postar um artigo por dia aqui na DIO, com assunto diversos, mas principalmente coisas que eu tive/tenho dificuldade.

Então decidi compartilhar com vocês.

 

📌Me siga para ver mais artigos

📌Curta( lá em cima do lado esquerdo " ^ ")

📌Comente se te ajudou

 

Se ficar com alguma dúvida pode me contatar 📧

✨Discord: imnotannamaria#1935

✨LinkedIn: www.linkedin.com/in/anna-maria-573801191/

✨Email: aannamariabr@outlook.com

 

_Anna Maria

2
57

Comentários (2)

0
Thiago Guedes

Thiago Guedes

07/01/2021 12:23

Incrível, Anna! Valeu!

1
Willams Sousa

Willams Sousa

07/01/2021 01:54

Que incrível esse tutorial, menina! Caramba, realmente muito esclarecedor!!!

Desenvolvedora Front-End | JavaScript | CSS | HTML

Brasil