Css Flexbox

Css Flexbox

1. Display: flex

   • É utilizado para fazer um item virar contêiner. Ex: Uma
   • Tudo dentro desse conteúdo vira elementos filhos.

2. Flex-direction:

   • Define a direção que o item irá iniciar. Ex 1,2,3 ou 3,2,1
   • Row
     • Os primeiros itens criados serão os primeiros exibidos  Ex: 1,2,3
   • Row-reverse
     • Os últimos serão os primeiros! Ex: 3,2,1 
   • Column
     • Os itens querem ocupar a coluna inteira. Ex:        1      2      3
   • Column-reverse
     • A mesma coisa que o Colunm, porem, quando terminar a coluna o próximo item irá para cima

3. Flex-wrap:

   • Ele decide se ao final do contêiner, o conteúdo irá ir para a próxima coluna ou não.
   • Nowrap
     • Quando ao final do contêiner: ele não ira pular a coluna Ex: sfffsfsdf/sfdfsff
   • Wrap-reverse
     • Quando quebrar a coluna, a próxima coluna irá para cima 
   • Wrap
     • Diz que ao final do contêiner ira quebrar a coluna.

4. Justifi-content:

   • Define se o item vai ficar na esquerda ou direita, centralizado..
   • Ele é na coluna. Na COLUNA !!!
   • Flex-start
     • Todos os itens ficam a esquerda 
   • Flex-end
     • Todos os elementos ficam na direita 
   • Center
     • Todos ficam centralizado
   • Space-between
     • Coloca um item na esquerda e outro na direita. Se houver 3 itens ele centraliza um.
   • Space-around
     • Cria um espaçamento igual entre o primeiro e o ultimo item, e os outros itens terão duas vezes o espaçamento do primeiro ou último(que é a mesma merda)

5. Align-itens:

   • Mexe com os itens a partir do eixo vertical.
   • Permite o alinhamento ao eixo vertical. Que antes era impossível. 
   • Ele mexe com os elementos filhos do display: flex, não o conteúdo.
   • Também tem as opções para o column. vai ser igual o chat do zap, ombro amg, telegram ....
   • Flex-stretch
     • É o padrão 
     • O item ira pegar o máximo que conseguir, tanto de width, quanto de height.
     • Os elementos filhos vão se dividir igualmente.
   • Flex-start
     • O tamanho do elemento sera o tamanho do conteúdo. 
     • todos os elementos vão ir para cima
   • Flex-end
     • Coloco todos os elementos ao final.
   • Flex-center
     • Centraliza os itens ao meio 
     • no eixo vertical. 
     • é igual o margin: 0 auto; porem no eixo vertical 
   • Baseline
     • Ele ira alinhar todos os itens a partir de um diferente.
     • Ex: Um único item com um padding ou margin e os outros não.

6. Align-content:

   • Alinha o conteúdo dos elementos  
   • Parece igual o align-itens mas não se confunda. o align-itens não se importa em deixar os itens dentro de uma coluna com tamanho diferentes. diferente do align-content que deixa os conteudos com tamanhos iguais em cada coluna.
   • Ex: se um elemento tiver um texto gigante e outro elemento na mesma coluna tiver um texto pequeno, o eixo vertical do pequeno será igual a do texto gigante, para igualar os dois em tamanhos 
   • Stretch
     • O padrão. Os elementos irão tentar pegar o máximo do contêiner. Tanto em width quanto em height.
   • Start
     • Coloca os elementos ao inicio
   • End
     • Coloca os elementos ao final
   • Center
     • Centraliza os elementos
   • Space-between
     • Coloca uma coluna ao inicio do contêiner, e outro ao final do contêiner.
     • Se tiver mais que dois um ira ficar centralizado
   • Space-around
     • O conteúdo inicial e final do contêiner sera espaçado. os próximos terão um espaçamento duas vezes maior que eles.

7. Flex-grow

   • Mexe com o tamanho do elemento
   • Caso o contêiner tiver dois elementos com Flex-grow:1; em cada, os elementos irão pegar o tamanho do elemento e dividir para os dois. se estiver um com o grow:1; e outro com o grow:2; o grow:2; vai pegar o espaço que criou no 1 e multiplicar por 2 e por ai vai 
   • Ele cria um espaço no conteúdo do elemento, ate completar o contêiner inteiro. Ex:...Ola...,...Ola.../         
   • o espaço dado em um elemento, será o espaço dado em todos os elementos
   • Auto
     • É o padrão. Ira pegar o contêiner e dividir o tamanho para cada elemento que tem no contêiner.
     • Tanto em width quanto em height.
   • Numero
     • Vai pegar os elementos que estão com números iguais e colocar com espaços iguais. se um elemento for grow:1; e outro grow:2, o grow:2 ira ter um espaço duas vezes maior que o grow:1; e por ai vai.

8. Flex-basis

   • Define um tamanho inicial, antes da divisão de espaço do grow
   • Ele trabalha junto com o flex-grow. Tipo um empregado na real
   • Auto
     • Não altera merda nenhuma 
   • 0
     • O elemento terá o mesmo tamanho que o conteúdo dele 
   • Numero
     • Define um tamanho antes da divisão de espaços do flex-grow. Pode ser em px, em, % .... etc
     • se vc colocar com 300px, não importa se dentro do elemento só tenha um "A", o tamanho do documento será 300px mesmo assim, e logo apos esses 300px será feito a divisão do flex-grow

9. Flex-shrink:

   • Define se o elemento ira diminuir para caber no contêiner 
   • 1
     • Valor padrão 
     • Fala que o elemento ira diminuir para caber no elemento 
   • 0
     • Não permite que o elemento diminua 

10. Flex

    • É o flex-shrink, Flex-grow e o basis junto 
    • ele pode ter ate 3 dígitos de código nessa ordem grow, shrink, basis

11. Order

    • Define a ordem de cada elemento

12. Align-self:

    • Alinha um único elemento
    • Flex-start
      • Alinha o elemento ao inicio do contêiner
    • Flex-end
      • Alinha ao final do conteiner
    • Center
      • Alinha ao centro
    • Stretch
      • estica o elemento