Fundamentos básicos de flexbox - CSS

O que é o Flexbox

Por muito tempo, as únicas ferramentas disponíveis para a criação de leiautes em CSS e posicionar elementos com boa compatibilidade entre browsers eram float e position. Porém, essas ferramentas possuem algumas limitações muito frustrantes, especialmente no que diz respeito à responsividade. Algumas tarefas que consideramos básicas em um leiaute, como centralização vertical de uma div-filha com relação a uma div-mãe, fazer com que divs-filhas ocupem a mesma quantidade de espaço e colunas terem o mesmo tamanho independente da quantidade de conteúdo interno, eram impossíveis ou muito difíceis de serem manejadas com floats ou position, ao menos de forma prática e flexível.

A ferramenta Flexbox (de Flexible Box) foi criada para tornar essas tarefas mais simples e funcionais: as filhas de um elemento com Flexbox podem se posicionar em qualquer direção e pode ter dimensões flexíveis para se adaptar.

Elementos

Flex container é o elemento que envolve sua estrutura. Você define que um elemento é um Flex Container com a propriedade display e valores flex ou inline-flex.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
.flex-container {
  display: flex;
}

Flex Item são elementos-filhas do flex container.

Eixos ou Axes são as duas direções básicas que existem em um Flex Container: main axis, que seria o eixo horizontal ou o eixo principal, e cross axis que seria o eixo vertical.

Propriedades para o elemento-mãe

Quando utilizamos o Flexbox, é muito importante saber quais propriedades são declaradas no elemento-mãe (por exemplo, uma div que irá conter os elementos a serem alinhados) e quais serão declaradas nos elementos-filhas. Abaixo, seguem algumas propriedades que devem ser declaradas utilizando o elemento-mãe como seletor (para alinhar elementos-filhas):

flex-direction determina a origem e o término do fluxo dos ítens. Eles seguem o vetor estabelecido pelo modo tradicional de escrita: esquerda para direita em row, cima para baixo em column, ou no sentido inverso utilizando -reverse.

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

Você pode definir se os elementos serão forçados a ficar em uma mesma linha ou se eles irão quebrar em várias linhas com a propriedade flex-wrap.

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

A propriedade flex-flow é uma propriedade shorthand (uma mesma declaração inclui vários valores relacionados a uma mesma propriedade) que inclui flex-direction e flex-wrap. Determina a ordem do fluxo em que os elementos aparecerão.

O justify-content define o alinhamento das filhas ao longo do eixo principal.

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

align-items define o comportamento padrão de como flex items são alinhados de acordo com o eixo vertical (cross axis). De certa forma, funciona de forma similar ao justify-content, porém no eixo perpendicular.

.flex-container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

align-content alinha o conteúdo dentro do container quando há espaço extra no eixo vertical, similar à forma que justify-content alinha ítens individuais dentro do eixo principal.

.flex-container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Propriedades para elementos-filhas

A seguir, veremos propriedades que devem ser declaradas tendo como seletor elementos-filhas, ou seja:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

Isso significa que, onde existe um elemento-mãe com propriedade flex, é possível atribuir propriedades flex específicas também para as filhas.

Importante!

• O CSS só enxerga a hierarquia mãe-filha; não vai aplicar as propriedades flex para elementos HTML que não estejam diretamente relacionados;
• Para que as propriedades funcionem nos elementos-filhas, as mães devem ter propriedade flex.
• As propriedades float, clear e vertical-align não têm efeito em flex-items.

A propriedade order determina o lugar que os elementos aparecerão.

.flex-item {
  order: <numero>; /* o valor default(padrão) é 0 */
}

flex-grow define a habilidade de um elemento-filha de "crescer" e ocupar uma área maior, se necessário. Por exemplo, se em uma lista de 3 filhas, 2 delas têm propriedade flex-grox: 1 e 1 delas tem flex-grow:2, essa última crescerá para ocupar o dobro do tamanho das irmãs.

.flex-item {
  flex-grow: <numero>; /* o valor default(padrão) é 0 */
}

align-self permite que o alinhamento padrão (definido por align-items) seja sobrescrito para ítens individuais.

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

Existem outras propriedades para as filhas, como flex-shrink, flex-basis e a shorthand flex, você pode pesquisar sobre elas para aumentar seu repertório.