Fundamentos do Flexbox, Parte1

Blz pessoal, como estão vocês?!

Hoje eu irei escrever um pouco sobre meus primeiros passos no desenvolvimento Utilizando o posicionamento de elementos, sobre os projetos e conhecimentos adquiridos dentro da trilha de aprendizado do Módulo II - HTML/CSS3/JS | Posicionando elementos com Flexbox no CSS. Durante o Santander Bootcamp Full Stack Developer 2022!

Fundamentos do Flexbox, Parte 1

Estrutura básica do display:flex

O Flex Container envolve os itens flex, usando o display: flex, a tag passa a ser um Flex Container.

Estrutura básica do flex direction

Define a direção dos itens dentro do container. Quando o display: flex é usado, por padrão os elementos ficam em linha, um do lado do outro.

Estrutura básica do flex wrap

Define a quebra ou não da linha. Quando o flex wrap é usado, ele não quebra a linha e isso faz com que os flex itens sejam compactados além do limite do conteúdo.

Estrutura básica e prática com flex flow

O flex flow não é muito usado, pois quando mudamos o flex-direction para column, mantemos o padrão do flex-wrap que é nowrap.

Estrutura básica do justify content

Alinha os itens dentro do flex no container de acordo com a direção. Essa propriedade só funciona se os itens não ocuparem todo o container.

Estrutura básica com align items

Alinha os itens de acordo com o eixo do container. O alinhamento é diferente para os itens que estão em colunas e para os itens que estão em linhas.

Estrutura básica com align content

Alinha as linhas de acordo ao eixo vertical do container. A propriedade só funciona se existir mais de uma linha dentro do container.

Com isso finalizamos essa primeira parte dos primeiros passos usando o posicionamento de elementos com Flexbox no CSS. Espero ter ajudado até aqui, e te aguardo para os Fundamentos do Flexbox, Parte2…😊

#SantanderBootcampFullStackDeveloper  #CSS  #Flexbox