FlexBox - Guia visual

Fala galera!

Primeiramente esse e o primeiro post de 2021 \o/

Estou muito animada e ansiosa para esse ano, mas vamos ao que interessa, ao conteúdo!

Hoje vou dar exemplos visuais sobre flexbox, para você entender melhor os conceitos do flexbox!

O que vamos aprender hoje?

• Arquitetura
• flex-direction
• justify-content
• align-content
• align-items
• align-self
• flex - grow | shrink | wrap

flex: É uma abreviação para flex-grow , flex-shrink e flex-basis combinados, você vai aprender melhor sobre eles lendo esse artigo 😉

Arquitetura

Propriedades

flex-direction

A direção em que os flex-items são distribuídos dentro do flex-container

justify-content

Essa propriedade organiza os flex-items ao longo do eixo principal (Main axis) dentro de um container.

align-content

Ela organiza os flex-items ao longo do cross axis dentro de um flex container, bem semelhante a ao justify-content.

align-items

Distribui flex-items ao longo do Cross Axis

align-self

flex - grow | shrink | wrap

• flex-grow: aumenta o tamanho de um flex-item com base na largura do flex-container.
• flex-shrink : A capacidade de um flex item encolher com base na largura do flex-container.
• flex-wrap : Quantidade de Flex-item que você deseja em uma linha / fileira.

Conclusão

E isso então, espero ter contribuído para seu aprendizado de alguma maneira, foco aqui não foi técnico e sim entender o conceito que também e importante.

As sugestões e críticas são altamente apreciadas.

Até o próximo.