Obs: Na Home, flex-direction: column; e flex-direction: column-reverse; não estão
exemplificados, porém o comportamento de ambos, visualmente, é o mesmo do mostrado em Display Normal,
com a alteração no flex-direction: column-reverse; que se inicia de baixo para cima.
- display: flex:
~ Alinhas os elementos-conteúdo lado a lado
- flex-direction: row;
~ Alinha os elementos da esquerda para a direita
- flex-direction: row-reverse;
~ Alinha os elementos da direita para a esquerda
- flex-direction: column;
~ Alinha os elementos de cima para baixo
- flex-direction: column-reverse;
~ Alinha os elementos de baixo para cima
- flex-wrap: wrap;
~ faz com que os elementos filhos respeitem o espaço definido pelo elemento pai e passem a quebrar
a linha para
ocupar o espaço
- flex-wrap: nowrap;
~ faz com que os elementos filhos não respeitem o espaço definido pelo elemento pai e não quebrem a
linha para
ocupar o espaço
- justify-content: flex-start;
~ Alinha os flex itens da esquerda para a direita
- justify-content: flex-end;
~ Alinha os flex itens da direita para a esquerda
- justify-content: center;
~ Alinha os flex itens centralizados
- justify-content: space-around;
~ Distribui a margin aplicada aos flex itens uniformemente
- justify-content: space-between;
~ Desconsidera a margem do primeiro e último flex itens