🦮 Principais comandos de flexbox para você NUNCA MAIS esquecer

.container {
  display: flex; /* or inline-flex */
}

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

• 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*/
}

• 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*/
    }

• 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*/
}

• 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*/
}

• 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