🦮 Principais comandos de flexbox para você NUNCA MAIS esquecer

Flex box

Define um elemento como flex, inline oublock.

---

.container {
  flex-direction: row; /*row-reverse | column | column-reverse*/
}

Define o eixo em que os itens serão colocados. Nesse caso em linhas ou colunas

• row (default): esquerda para direita

• row-reverse: direita para esquerda

• column: de cima para baixo

• column-reverse: de baixo para cima

---

.container {
  flex-wrap: wrap; /*nowrap | wrap | wrap-reverse*/
}

Serve para dizer como você quer quebrar a linha. wrap faz a div quebrar a linha quando chega ao final. nowrap Não quebra

• wrap: faz a div quebrar a linha quando chega ao final.
• nowrap: Não quebra a linha.
• wrap-reverse: Quebrar linhas de baixo para cima.

---

.container {
      justify-content: flex-start; /*flex-end | center | space-between | space-around | space-evenly*/
    }

Define o alinhamento no eixo horizontal

• flex-start: Alinha no começo da linha
• flex-end: Alinha no final da linha
• center: Alinha no centro da linha
• space-between: O espaço é igualmente distribuido (representado na imagem)
• space-around: (representado na imagem)
• space-evenly: (representado na imagem)

---

.container {
  align-items: stretch; /*flex-start | flex-end | center | baseline*/
}

Define o alinhamento no eixo vertical

• stretch: Enche a div para preencher todo o conteudo
• flex-start: Os items são posicionados no início verticalmente
• flex-end: Os items são posicionados no fim verticalmente
• center: Os items são posicionados no centro verticalmente
• baseline: Os items são posicionados de acordo com seu texto

.container {
  align-content: flex-start; /*flex-end | center | space-between | space-around | space-evenly | stretch*/
}

Define o alinhamento quando se tem várias linhas

• stretch: Enche a div para preencher todo o conteudo
• flex-start: Os items são posicionados no início verticalmente
• flex-end: Os items são posicionados no fim verticalmente
• center: Os items são posicionados no centro verticalmente
• space-between: O espaço é igualmente distribuido (representado na imagem)
• space-around: (representado na imagem)
• space-evenly: (representado na imagem)
• stretch: Preenche as divs para ocupar todo o conteudo

---

Gostou? Comenta ai o que achou!

Link Code Company: 🎁