CSS Flexbox: Guia Completo

Neste guia vamos entender na prática o que é CSS Flexbox. Explicaremos tudo sobre o flexbox, focando em todas as diferentes propriedades possíveis do elemento pai (o flex container) e os elementos filhos (os flex items). Ele também inclui histórico, demonstrações, padrões e um gráfico de suporte do navegador.

Afinal, o que é Flexbox?

O Flexbox tem como seu principal objetivo permitir que os elementos de um layout tenham a capacidade de ampliar ou reduzir seu tamanho e se alinhar em um layout sem quebras.

CSS Flexbox tem a função de organizar elementos em uma página quando o seu tamanho final é desconhecido ou quando possui um conteúdo dinâmico. Quando realmente entendemos como funciona, podemos construir layouts dinâmicos que respondem automaticamente, reorganizando-se conforme necessário.

Mas antes de ir para a prática, assita o video abaixo sobre Flexbox.

Agora que você sabe como funiona o Flexbox, é importante saber que você precisa definir propriedades e valores também aos itens flexíveis, só combinando propriedades e valores aos dois elementos é que você conseguirá ajustar seu layout como desejado.

Propriedades do Container Flexbox

Para definirmos um container um item flexivel, precisamos acionar a propriedade display: flex.

display

Define o elemento como um flex container, tornando os seus filhos flex-itens.

• display: flex; Torna o elemento um flex container automaticamente transformando todos os seus filhos diretos em flex itens.

 flex-direction

Define a direção na qual os flex-itens são colocados no container. Alterar o valor da propriedade flex-direction, nos permite alterar como os itens. flex-direction pode aceitar um dos quatro valores:

• flex-direction: row; Os itens ficam em linha
• flex-direction: row-reverse; Os itens ficam em linha reversa, ou seja 3, 2, 1.
• flex-direction: column; Os itens ficam em uma única coluna, um embaixo do outro.
• flex-direction: column-reverse; Os itens ficam em uma única coluna, um embaixo do outro, porém em ordem reversa: 3, 2 e 1.

flex-wrap

Define se os itens devem quebrar ou não a linha. É usado para controlar o empacotamento de itens dentro de um container. Se reduzirmos a largura do navegador, perderemos alguns itens da largura do navegador. O comportamento muda com a propriedade flex-wrap. Ele pode aceitar três valores possíveis:

• flex-wrap: nowrap; Valor padrão, não permite a quebra de linha.
• flex-wrap: wrap; Quebra a linha assim que um dos flex itens não puder mais ser compactado.
• flex-wrap: wrap-reverse; Quebra a linha assim que um dos flex itens não puder mais ser compactado. A quebra é na direção contrária, ou seja para a linha acima.

flex-flow

É um atalho para as propriedades flex-direction e flex-wrap. Você não verá muito o seu uso, pois geralmente quando mudamos o flex-direction para column, mantemos o padrão do flex-wrap que é nowrap.

E quando mudamos o flex-wrap para wrap, mantemos o padrão do flex-direction que é row.

• flex-flow: row nowrap; Coloca o conteúdo em linha e não permite a quebra de linha.
• flex-flow: row wrap; Coloca o conteúdo em linha e permite a quebra de linha.
• flex-flow: column nowrap; Coloca o conteúdo em coluna e não permite a quebra de linha.

justify-content

Alinha os itens flex no container de acordo com a direção. Excelente propriedade para ser usada em casos que você deseja alinhar um item na ponta esquerda e outro na direita, como em um simples header com marca e navegação.

Essa propriedade é implementada no nível do container flexível. Por padrão, é definido como flex-start (alinhamento à esquerda).

• justify-content: flex-start; Alinha os itens ao início do container.
• justify-content: flex-end; Alinha os itens ao final do container.
• justify-content: center; Alinha os itens ao centro do container.
• justify-content: space-between; Cria um espaçamento igual entre os elementos. Mantendo o primeiro grudado no início e o último no final.
• justify-content: space-around; Cria um espaçamento entre os elementos. Os espaçamentos do meio são duas vezes maiores que o inicial e final.

align-items

É usado para alinhar elementos no plano vertical. Essa propriedade também é implementada no nível do container flexível.

Para alinhar itens verticalmente, a altura deve ser definida

• align-items: stretch; Valor padrão, ele que faz com que os flex itens cresçam igualmente.
• align-items: flex-start; Alinha os itens ao início.
• align-items: flex-end; Alinha os itens ao final.
• align-items: center; Alinha os itens ao centro.
• align-items: baseline; Alinha os itens de acordo com a linha base da tipografia.

align-content

Ajuda a definir o alinhamento das linhas de um container. o align-content, funciona apenas quando há várias linhas de itens flexíveis no container. O container precisa ter um tamanho maior que a altura das linhas para ter o efeito ser visualizado.

Propriedades do Flex Item

Os Flex Items são elementos os filhos de um elemento Flex.

Um Flex Item também pode ser definido como um elemento Flex, desta forma os seus elementos diretos também passam a ser Flex Items.

flex-grow

Permite que um Flex Item possa expandir, se necessário. Esta propriedade especifica a quantidade de espaço dentro do container flexível que o item deve ocupar, se necessário. Todos os itens flexíveis têm um flex-grow com valor 0 definido.

• flex-grow: número; Basta definir um número
• flex-grow: 0; Obedece o width do elemento ou o flex-basis.

flex-basis

Especifica o tamanho principal inicial de um Flex Item antes que o espaço extra no container seja distribuído:

• flex-basis: auto; Esse é o padrão, ele faz com que a largura da base seja igual a do item. Se o item não tiver tamanho especificado, o tamanho será de acordo com o conteúdo.
• flex-basis: unidade; Pode ser em %, em, px e etc.
• flex-basis: 0; Se o grow for igual ou maior que 1, ele irá tentar manter todos os elementos com a mesma largura, independente do conteúdo (por isso 0 é o valor mais comum do flex-basis). Caso contrário o item terá a largura do seu conteúdo.

flex-shrink

Define a capacidade de redução de tamanho do item.

• flex-shrink: 1; Valor padrão, permite que os itens tenham os seus tamanhos (seja esse tamanho definido a partir de width ou flex-basis) reduzidos para caber no container.
• flex-shrink: 0; Não permite a diminuição dos itens, assim um item com flex-basis: 300px; nunca diminuirá menos do que 300px, mesmo que o conteúdo não ocupe todo esse espaço.
• flex-shrink: número; Um item com shrink: 3 diminuirá 3 vezes mais que um item com 1.

flex

É um atalho para as propriedades flex-grow, flex-shrinke flex-basis.

• flex: 1; Define flex-grow: 1; flex-shrink: 1; e flex-basis: 0; (em alguns browsers define como 0%, pois estes ignoram valores sem unidades, porém a função de 0 e 0% é a mesma.)
• flex: 0 1 auto; Esse é o padrão, se você não definir nenhum valor de flex ou para as outras propriedades separadas, o normal será flex-grow: 0, flex-shrink: 1 e flex-basis: auto.
• flex: 2; Define exatamente da mesma forma que o flex: 1; porém neste caso o flex-grow será de 2, o flex-shrink continuará 1 e o flex-basis 0.
• flex: 3 2 300px; flex-grow: 3, flex-shrink: 2 e flex-basis: 300px;

oder

Gerencia a ordem em que o item chega ao  flex container. Todos os padrões de itens têm uma ordem de zero:

• order: número; Número para modificar a ordem padrão. Pode ser negativo.
• order: 0; 0 é o valor padrão e isso significa que a ordem dos itens será a ordem apresentada no HTML. Se você quiser colocar um item do meio da lista no início da mesma, sem modificar os demais, o ideal é utilizar um valor negativo para este item, já que todos os outros são 0.

align-self

Permite o alinhamento individual dos flex items.

• align-self: auto; Valor inicial padrão. Vai respeitar o que for definido pelo align-items no flex-container.
• align-self: flex-start; Alinha o item ao início.
• align-self: flex-end; Alinha o item ao final.
• align-self: center; Alinha o item ao centro.
• align-self: baseline; Alinha o item a linha de base.
• align-self: stretch; Estica o item.

Conclusão sobre CSS Flexbox

Podemos concluir que o Flexbox trata de organizar um grupo de itens em uma linha ou coluna e nos dar uma quantidade absurda de controle sobre a distribuição e o alinhamento desses itens. A ideia principal da propriedade flex é ser flexível, permitindo alterar propriedades como altura, largura e ordem afim de se adaptar da melhor forma possível no espaço disponível, podendo se expandir ou diminuir de acordo com a necessidade evitando que o layout quebre.

Espero que este artigo sobre CSS flexbox tenha lhe dado uma boa ideia de como um Flexbox pode ser implementado para criar layouts dinâmicos para seus modelos HTML. Caso queira saber mais sobre CSS, recomendo a leitura do artigo Geradores de Códigos CSS.

Caso esteja procurando curso de desenvolvimento web completo, aqui na Brasil Code temos um treinamento de desenvolvimento web onde você vai aprender mais sobre HTML, CSS e JavaScript e outras tecnologia. Clique no botão abaixo para conhecer o treinamento!

Um forte abraço!

Links de Referência:

https://css-tricks.com/snippets/css/a-guide-to-flexbox
https://developer.mozilla.org/pt-BR/docs/Web/CSS
https://danieldcs.com/css-flexbox-guia-pratico
https://codepen.io/origamid