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:
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:
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.