Flexbox

O que é FlexBox

O CSS Flexible Box Layout, conhecido como Flexbox, é um modelo de layout da Web CSS3. Está no estágio de recomendação de candidatos (CR) do W3C. O layout flexível permite que os elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela (ou dispositivo).

Como a própria Wikipedia diz, facilita nossa vida na hora de criar layouts, e como facilita... Criar layouts complexos com linhas e colunas parece brincadeira de criança com FlexBox.

Como funciona o Flexbox

Seu uso e conceito são bem simples, normalmente aplicamos o Flexbox em elementos que possuem filhos para ajustá-los da forma que queremos. Como assim?

<div class="container">
 <h1>Eu sou o filho 1</h1>
 <h2>Eu sou o filho 2</h2>
</div>

Podemos dizer que a nossa div com a classe container é a candidata perfeita para ser display: flex

Propriedades do Flexbox

A partir do momento que definimos um elemento com display: flex, podemos usar as propriedades align-items, justify-content e flex-direction, além de outras.

flex-direction

Por padrão a propriedade flex-direction vem com o valor padrão de row, isso significa que o posicionamento será sempre na horizontal. Podemos modifica-lo para flex-direction: column que muda o comportamento para colunas, ou seja, na vertical. Isso influencia diretamente nas outras propriedades do Flexbox, caso o flex-direction seja column, align-items e o justify-content vão inverter as direções.

align-items

A propriedade align-items possui a função de alinhar os filhos na horizontal/vertical e tem como principais valores: center, flex-start e flex-end.

center como o próprio nome diz, posiciona os elementos horizontalmente/verticalmente ao centro.

flex-start posiciona os elementos horizontalmente/verticalmente ao inicio.

flex-end posiciona os elementos horizontalmente/verticalmente no final.

justify-content

A propriedade justify-content possui a função de alinhar os filhos na horizontal/vertical e tem como principais valores os mesmo do align-items com a adição de space-between e space-around.

space-between posiciona todos os elementos horizontalmente/verticalmente com o máximo de espaço entre eles

space-around posiciona os elementos horizontalmente/verticalmente com o máximo de espaço ao redor deles.

Agora um exemplo com Flexbox

Vamos construir a barra de navegação do próprio Dev.to. Com apenas 3 linhas de CSS conseguimos ter o posicionamento idêntico, mostrando o poder do Flex box.

HTML

<nav>
  <div>
    logo
    <input type="search">
  </div>

  <div>
    <button>Write a post</button>
    <span>Icone 1</span>
    <span>Icone 2</span>
    <span>Imagem</span>
  </div>
</nav>

CSS

nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Claro, estamos olhando apenas para o posicionamento dos elementos e não para a estilização.

Resultado