7

Entenda Flexbox parte 2

Anna Maria
Anna Maria

📢Parte 1 👈


3 - Justify Content


Justify-content controla como você alinha itens no eixo principal(Main).

Podem ser:

  1. Flex-start
  2. Flex-end
  3. Center
  4. Space-between
  5. Space-around


Image for post


lembre-se de que justify-content funciona ao longo do eixo principal, ou seja, NA HORIZONTAL.


4 - Align Items


Assim como o Justify-content, o Align Items também serve para alinhar os itens, porém, no eixo cruzado(Cross), ou seja, NA VERTICAL.


Image for post


Podem ser:

  1. flex-start
  2. flex-end
  3. center
  4. stretch
  5. baseline


Image for post


5 - Align Self


Permite que você manipule manualmente o alinhamento de um elemento específico.

Vamos supor novamente que você tenha quatro quadrados,e você quer que somente os dois primeiros fiquem no centro e os outros fiquem padrão.

EX:

.container {
  align-items: flex-start;
}
.quadrado-um {
  align-self: center;
}
.quadrado-dois {
  align-self: center;
}


Image for post




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

3
56

Comentários (3)

1
Willams Sousa

Willams Sousa

07/01/2021 01:56

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

1
Vitória Barbosa

Vitória Barbosa

07/01/2021 01:45

obrigado sua explicação me ajudou a entender muito melhor esses conceitos

1
Marcos Ribeiro

Marcos Ribeiro

06/01/2021 18:38

Parabéns, ficou show de bola!

Desenvolvedora Front-End | JavaScript | CSS | HTML

Brasil