Criando espaçadores com o Flexbox

Eu era um dos maiores fãs do flexbox antes de seu surgimento, mas, devido a mudanças na Mozilla, nunca tive a chance de usá-lo em nenhum projeto prático; portanto, o flexbox ainda parece um pouco misterioso para mim. Isso me incomoda muito porque me sinto excluído da revolução do flexbox, embora hoje em dia o sentimento que ouço é que o flexbox acabou sendo um fracasso e que a grade CSS é a nova moda.

Um utilitário incrível do flexbox são os espaçadores. Um problema do passado era encaixar itens à esquerda e itens à direita, mas precisando mexer no posicionamento absoluto para que isso acontecesse. Com o flexbox, é fácil obter esse efeito sem precisar de tamanhos fixos de elementos ou cálculos de largura em JavaScript.

O HTML

Vamos supor uma estrutura muito simples de um pai, um filho esquerdo e direito e um espaçador:

<div class="parent">
  <div class="left-buttons"></div>
  <div class="spacer"></div>
  <div class="right-buttons"></div>
</div>

O espaçador estará vazio.

O CSS

O CSS será baseado em flexbox:

.parent {
  display: flex;
}

.spacer {
  flex-grow: 1;
}

O segredo é ter um pai com display: flex e o espaçamento ter flex-grow: 1. Independentemente da largura da esquerda e da direita, o espaçador ocupa o espaço restante. Se a esquerda e a direita ficarem maiores do que o espaço disponível… então as coisas serão empurradas.

Veja a caneta Espaçadores Flexbox por David Walsh (@darkwing) em CodePen.

O Flexbox tem uma má reputação: as APIs de layout antigas eram tão ruins que uma atualização moderada ainda deveria ser comemorada. Independentemente disso, vamos comemorar uma API simples que nos permite criar esse layout de amostra que desejamos há tanto tempo.