Skip to main content

Flex Box | CSS

  • Flex Box | CSS
info

Como o flexbox é um módulo inteiro e não uma única propriedade, ele envolve muitas coisas, incluindo todo o seu conjunto de propriedades. Alguns deles devem ser definidos no contêiner (elemento pai, conhecido como "contêiner flexível"), enquanto os outros devem ser definidos nos filhos (ditos "itens flexíveis").

Básico e terminologia​

  • Se o layout "regular" for baseado nas direções de fluxo em bloco e em linha, o layout flexível será baseado em "direções de fluxo flexível". Por favor, dê uma olhada nesta figura da especificação, explicando a ideia principal por trás do layout flexível.

alt text

Os itens serão dispostos seguindo ou o eixo principal (de main-start a main-end) ou o eixo cruzado (de cross-start a cross-end).

  • Eixo principal (main axis) – O eixo principal de um contêiner flex é o eixo primário ao longo do qual os itens flex são dispostos. Atenção: ele não é necessariamente horizontal; depende da propriedade flex-direction (veja abaixo).
  • main-start | main-end – Os itens flex são colocados dentro do contêiner começando em main-start e indo até main-end.
  • Tamanho principal (main size) – A largura ou altura de um item flex, seja qual for a dimensão correspondente ao eixo principal, é o seu tamanho principal. A propriedade de tamanho principal do item flex é width ou height, dependendo da dimensão do eixo principal.
  • Eixo cruzado (cross axis) – O eixo perpendicular ao eixo principal é chamado de eixo cruzado. Sua direção depende da direção do eixo principal.
  • cross-start | cross-end – As linhas flex são preenchidas com itens e colocadas no contêiner começando pelo lado cross-start e indo em direção ao lado cross-end.
  • Tamanho cruzado (cross size) – A largura ou altura de um item flex, seja qual for a dimensão correspondente ao eixo cruzado, é o seu tamanho cruzado. A propriedade de tamanho cruzado é width ou height, dependendo da dimensão do eixo cruzado.

Propriedades Flexbox​

alt text

Propriedades do Pai (contêiner flex)

Propriedades do Pai (Flex Container)​

display​

Define um contêiner flex, podendo ser inline ou block dependendo do valor atribuído. Ele ativa o contexto flex para todos os filhos diretos.

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

⚠️ Observação: colunas em CSS (columns) não têm efeito em um contêiner flex.

flex-direction​

Estabelece o eixo principal, definindo a direção na qual os itens flex serão posicionados dentro do contêiner. O Flexbox é (exceto pelo wrap opcional) um conceito de layout em uma única direção: pense nos itens flex sendo organizados em linhas horizontais ou colunas verticais.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row (padrão): da esquerda para a direita no ltr; da direita para a esquerda no rtl.
  • row-reverse: da direita para a esquerda no ltr; da esquerda para a direita no rtl.
  • column: igual ao row, mas de cima para baixo.
  • column-reverse: igual ao row-reverse, mas de baixo para cima.

flex-wrap​

Por padrão, todos os itens flex tentam caber em uma única linha. Com esta propriedade, você pode permitir que os itens quebrem para múltiplas linhas conforme necessário.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap (padrão): todos os itens ficam em uma única linha.
  • wrap: os itens quebram em múltiplas linhas, de cima para baixo.
  • wrap-reverse: os itens quebram em múltiplas linhas, de baixo para cima.

flex-flow​

É uma shorthand que combina as propriedades flex-direction e flex-wrap, definindo juntos os eixos principal e cruzado do contêiner. O valor padrão é:

.container {
  flex-flow: row nowrap;
}

Exemplo:

.container {
  flex-flow: column wrap;
}

Justify-content​

alt text

Essa propriedade define o alinhamento ao longo do eixo principal. Ela ajuda a distribuir o espaço livre restante quando:

  • todos os itens flex em uma linha são inflexíveis, ou
  • são flexíveis mas já atingiram seu tamanho máximo.

Também exerce algum controle sobre o alinhamento dos itens quando eles excedem a linha.

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

Valores principais:​

  • flex-start (padrão): itens agrupados no início do flex-direction.
  • flex-end: itens agrupados no final do flex-direction.
  • start: itens agrupados no início da direção definida pelo writing-mode.
  • end: itens agrupados no final da direção definida pelo writing-mode.
  • left: itens agrupados à borda esquerda do contêiner (quando fizer sentido com o flex-direction; caso contrário, se comporta como start).
  • right: itens agrupados à borda direita do contêiner (quando fizer sentido com o flex-direction; caso contrário, se comporta como end).
  • center: itens centralizados ao longo da linha.
  • space-between: itens distribuídos igualmente ao longo da linha; o primeiro fica no início e o último no final.
  • space-around: itens distribuídos com espaços iguais ao redor deles. (Visualmente, as bordas parecem diferentes: o primeiro item terá “meio espaço” antes da borda, mas “um espaço inteiro” entre ele e o próximo, já que cada item adiciona seu próprio espaçamento).
  • space-evenly: os itens são distribuídos de forma que todos os espaços (entre os itens e nas bordas) sejam exatamente iguais.

Compatibilidade dos navegadores​

  • O suporte a esses valores pode variar:

    • space-between nunca foi suportado por algumas versões do Edge.
    • start / end / left / right ainda não são suportados no Chrome.

  • Valores mais seguros de usar: flex-start, flex-end e center.

Modificadores: safe e unsafe​

  • safe: garante que, ao alinhar, o elemento não seja empurrado para fora da tela (fora do scroll), evitando “perda de conteúdo” (data loss).
  • unsafe: não impede esse comportamento, podendo empurrar o item para fora da área visível.

align-items​

alt text

Define o comportamento padrão de como os itens flex são dispostos ao longo do eixo cruzado na linha atual. Você pode pensar nisso como a versão de justify-content, mas aplicada ao eixo perpendicular ao principal.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end ... + safe | unsafe;
}

Valores principais:​

  • stretch (padrão): os itens são esticados para preencher o contêiner (respeitando ainda min-width e max-width).

  • flex-start / start / self-start: itens alinhados ao início do eixo cruzado.

    • A diferença entre eles é sutil: está relacionada a respeitar as regras de flex-direction ou de writing-mode.

  • flex-end / end / self-end: itens alinhados ao final do eixo cruzado.

    • Novamente, as diferenças são sutis, ligadas a flex-direction vs. writing-mode.

  • center: itens centralizados ao longo do eixo cruzado.

  • baseline: itens alinhados de forma que suas linhas de base (baseline) fiquem ajustadas.

Modificadores: safe e unsafe​

Podem ser usados junto com qualquer valor acima (embora o suporte dos navegadores varie):

  • safe: evita que o alinhamento torne o conteúdo inacessível (por exemplo, empurrando para fora da área visível sem rolagem).
  • unsafe: não impede esse comportamento, podendo causar “perda de conteúdo”.