Informações com referências de cursos da Alura, site da MDN e de um projeto feito na ORIGAMID, o qual não sou autor. As refências do mesmo e outras informações podem ser encontradas no rodapé próprio site.
Pergunte para as tags, ou classes, quem é o pai. A tag/classe pai deverá receber no CSS o seguinte parâmetro:
classe-pai {
display: flex;
}
Obs.: Classes filhos ficarão com tamanhos iguais caso o pai receba display flex.
Para esta ação, devemos apenas adicionar o seguinte parâmetro a classe pai:
classe-pai {
...
align-items: center;
}
Nesse caso, precisamos ter um espaço em restante no espaço pai. Por exemplo:
Utilizaremos o parâmetro:
classe-pai {
...
justify-content: space-between;
}
O resultado será:
Para isso, utilizaremos um parâmetro parecido com o anterior:
classe-pai {
...
justify-content: space-around;
}
Lembrando que para utilizar comandos flex, precisamos que a classe pai, referente ao filho que estamos trabalhando, receba display: flex;
. Com isso feito, utilizaremos flex-direction
, o qual define a direção dos itens. Para esse caso utilizaremos a propriedade column
. Ela separa cada item do pai em colunas.
Obs: Por padrão de sistema, o flex-direction
tem como parâmetro row
, ou seja, em linha.
Para isso, utilizaremos o comando flex-wrap
. Esse comando poderá receber 3 parâmetros:
{
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
}
Lembrando que é recomendável que o elemento pai tenha um valor de altura.
Para usar flex-direction
e flex-wrap
de uma vez só podemos utilizar o flex-flow
. Ele recebe dois parâmetros, o primeiro indicará se é uma coluna ou uma linha, o segundo se é um quebra linha ou não:
{
flex-flow: [row/column] [wrap/nowrap];
}
Para alterar a ordem precisamos usar o order: n
. Por padrão, os itens flex possuem um order: 0;
. Se temos apenas um item que quermos colocar antes de todos os outros itens, colocamos order: -1;
, e para colocá-lo na última posição colocamos order: 1;
. Podemos também utilizar para ordenar conforme uma base de números que escolhermos, por exemplo:
- item 3: order: 1
- item 5: order: 1
- item 1: order: 2
- item 2: order: 3
- item 4: order: 3
Infelizmente o flexbox não tem um cogumelo, mas podemos usar o flex-grow: n;
. Devemos dar um número para definir a proporção que o item irá crescer. Por padrão o flex-grow
tem 0
como valor.
Se dois itens filhos do mesmo pai estiverem utilizando flex grow, o espaço será dividido proporcionalmente com o valor que colocar no item.
O flex-shrink: n;
faz esse trabalho para a gente.
Ao diminuir a resolução da tela, ele faz o trabalho de diminuir certos itens mais do que os outros, sendo que ele recebe um valor proporcional também, como no flex-grow
{
display: flex; => Necessário para o funcionamento do flexbox
flex-direction: ;
justify-content: ;
flex-wrap: ;
flex-flow: ;
align-items: ;
align-content: ;
}
{
order: ;
flex-grow: ;
flex-shrink: ;
flex-basis: ;
flex: ;
align-self: ;
}