FlexBox

FlexBox

1. Flex-direction

   • row
     • esquerda para a direita
   • row-reverse
     • direita para a esquerda
   • column
     • mesmo que row, mas de cima para baixo
   • column-reverse
     • em colunas de baixo para cima

2. flex-wrap

   • nowrap
     • todos os flex items ficarão em uma só linha
   • wrap
     • os flex items vão quebrar em múltiplas linhas, de cima para baixo
   • wrap-reverse
     • os flex items vão quebrar em múltiplas linhas de baixo para cima

3. justify-content

   • flex-start
     • os ítens são alinhados junto à borda de início (start) de acordo com qual for a flex-direction do container.
   • flex-end
     • os ítens são alinhados junto à borda final (end) de acordo com qual for a flex-direction do container.
   • start
     • os ítens são alinhados junto à borda de início da direção do writing-mode (modo de escrita).
   • end
     • os ítens são alinhados junto à borda final da direção do writing-mode (modo de escrita).
   • left
     • os ítens são alinhados junto à borda esquerda do container, a não ser que isso não faça sentido com o flex-direction que estiver sendo utilizado. Nesse caso, se comporta como start
   • right
     • os ítens são alinhados junto à borda direita do container, a não ser que isso não faça sentido com o flex-direction que estiver sendo utilizado. Nesse caso, se comporta como start.
   • center
     • os ítens são centralizados na linha
   • space-between
     • os ítens são distribuídos de forma igual ao longo da linha; o primeiro ítem junto à borda inicial da linha, o último junto à borda final da linha.
   • space-around
     • os ítens são distribuídos na linha com o mesmo espaçamento entre eles
   • space-evenly
     • os ítens são distribuídos de forma que o espaçamento entre quaisquer dois itens da linha (incluindo entre os ítens e as bordas) seja igual.

4. align-items

   • stretch
     • estica os ítens para preencher o container, respeitando o min-width/max-width
   • flex-start/ start / self-start
     • ítens são posicionados no início do eixo transversal. A diferença entre eles é sutil e diz respeito às regras de flex-direction ou writing-mode
   • center
     • ítens são centralizados no eixo transversal.
   • baseline
     • ítens são alinhados de acordo com suas baselines.

5. align-content

   • flex-start / start
     • ítens alinhados com o início do container. O valor (com maior suporte dos navegadores) flex-start se guia pela flex-direction, enquanto start se guia pela direção do writing-mode.
   • flex-end / end
     • ítens alinhados com o final do container. O valor (com maior suporte dos navegadores) flex-end se guia pela flex-direction, enquanto end se guia pela direção do writing-mode.
   • center
     • ítens centralizados no container.
   • space-between
     • ítens distribuídos igualmente; a primeira linha junto ao início do container e a última linha junto ao final do container.
   • space-around
     • ítens distribuídos igualmente com o mesmo espaçamento entre cada linha.
   • space-evenly
     • ítens distribuídos igualmente com o mesmo espaçamento entre eles.
   • stretch
     • ítens em cada linha esticam para ocupar o espaço remanescente entre elas.

6. order

   • Determina a ordem em que os elementos aparecerão.
     • .flex-item { order: <número>; /* o valor padrão é 0 */ }

7. align-self

   • Permite que o alinhamento padrão (ou o que estiver definido por align-items) seja sobrescrito para ítens individuais.

Bilder und Dateien der Mindmap