Um breve guia sobre flexbox no css 🎯

O Flexbox é uma forma legal e muito eficiente para dispor os itens de um contêiner, mesmo quando o seu tamanho é desconhecido e/ou dinâmico (portanto, a palavra “flex”), tornando assim o elemento flexível.

Propriedades de um elemento flexível

Os itens flexbox são predispostos entre um pai e filhos, e algumas propriedades só vão surtir o efeito quando aplicado no contêiner pai para os itens filhos.

Veja o exemplo das propriedades mais usadas

Propriedade para um contêiner pai

Display

Define um contêiner do tipo flexível; inline ou bloco, dependendo do valor fornecido. Ele permite um contexto flexível para todos os seus filhos diretos.

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

Direção

Estabelece o eixo principal, definindo assim a direção em que os itens flexíveis são colocados no contêiner.

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

• row(padrão): da esquerda para a direita
• row-reverse: direita para esquerda
• column: o mesmo que, row mas de cima para baixo
• column-reverse: o mesmo que, row-reverse mas de baixo para cima

Encapsulamento

Por padrão, todos os itens flexíveis tentarão caber em uma linha. Você pode alterar isso e permitir que os itens sejam encapsulados conforme o necessário.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap(padrão): todos os itens flexíveis estarão em uma linha
• wrap: os itens flexíveis serão agrupados em várias linhas, de cima para baixo.
• wrap-reverse: os itens flexíveis serão agrupados em várias linhas de baixo para cima.

Fluxo

Este é um atalho para as propriedades flex-directione flex-wrap, que juntas definem os eixos principal e transversal do contêiner flexível. O valor padrão é row nowrap.

.container {
  flex-flow: column wrap;
}

Justificar
Define o alinhamento dos itens. Ele ajuda a distribuir as sobras de espaço livre extra quando todos os itens flexíveis em uma linha são inflexíveis ou são flexíveis, mas atingiram seu tamanho máximo.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right | unsafe;
}

Propriedades para os itens filhos

Ordem
Por padrão, os itens flexíveis são dispostos na ordem de origem. No entanto, a propriedade order controla a ordem em que o item se posiciona dentro do contêiner pai.

.item {
  order: 5; /* padrão é 0 */
}

Grow
Isso define a capacidade de um item flexível crescer, se necessário. Ele determina a quantidade de espaço disponível dentro do contêiner pai que o item deve ocupar.

.item {
  flex-grow: 4; /* padrão é 0 */
}

Se todos os itens forem flex-grow definidos como 1, o espaço restante no contêiner será distribuído igualmente para todos os filhos.

Alinhar-se
Permite que o alinhamento padrão (ou aquele especificado por align-items (no contêiner pai)) seja substituído por um comando de aliamento individual do item.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Como podemos observar, os filhos não possuem muitas propriedades de comportamento em relação ao pai, pois boa parte das regras de comportamento dos itens são definidas no contêiner pai.

Conclusão

No geral, nós iremos usar mais as propriedades no contêiner pai para surtir efeito nos itens filhos, pois a grande maioria das propriedade de um flexbox são comandos direcionados para mudar o comportamento dos filhos predispostos dentro deste contêiner. É como na vida, quando moramos na casa dos nossos pais, as nossas ações e comportamentos serão com base nas diretrizes definidas pelos nossos pais.

Gostou do artigo? Deixe o seu feedback 😁

Siga o meu instagram pra ficar ligado Siga-nos
Se inscreva no meu canal para aprender mais coisas legais 😉Youtube