Tableless

Busca Menu

Experimentando flexbox hoje: topo alinhado sem muito esforço

Seja o primeiro a comentar por

Como muitos desenvolvedores web, gosto de experimentar features novas ocasionalmente. Uma das coisas que costumava fazer em todo projeto é deixar o menu alinhado horizontalmente à logo, como no exemplo abaixo:

Exemplo de topo com logo e links

Só que nunca foi tão fácil assim: para deixar eles alinhados verticalmente, precisamos adicionar margin ou padding à logo ou ao menu. E com a popularização do site responsivo, os tamanhos dessas propriedades não eram os únicos problemas: tanto a logo quanto o espaçamento entre os links poderiam diminuir ou aumentar conforme o tamanho da tela e daria um grande trabalho (criar vários media queries com vários ajustes em cada resolução) para conseguirmos alinhar em todos os dispositivos.

É aí que entra o flexbox. Se você usa Bootstrap, sua sintaxe do topo deve ser similar à esta:

See the Pen xwmWOV by Alan Marcos (@alanmarcos) on CodePen.

Solução

Costumo criar uma classe para esse tipo de alinhamento:

.row-centered {
   display: flex;
   align-items: center;
}

E com só duas linhas de código, temos um topo alinhado horizontalmente sem muito esforço!

See the Pen epbMgY by Alan Marcos (@alanmarcos) on CodePen.

Compatibilidade

A compatibilidade do flexbox hoje já é bem alta, ou seja, você também pode usar nos seus projetos, lembrando que você pode utilizar o Modernizr para detectar essa feature e usar um fallback quando necessário.

Conclusão

Pode parecer um problema pequeno, mas estas duas linhas acabaram resolvendo muitos problemas nos meus projetos mais recentes. Como o flexbox ainda não é uma feature “100% bulletproof”, recomendo usar em pequenos ajustes como o deste post.

Publicado no dia