Como usar o método de layout do Flexbox (parte 1)

A cada nova revisão de CSS, uma infinidade de atributos novos e excitantes vêm à luz; um dos quais é a exibição discreta: flex approach.

O modelo de layout flexbox tem flutuado na web por algum tempo agora, cada vez com sua própria variação na abordagem (alguns desatualizados, como o display: box ou display: flexbox method).

No guia de hoje, descobriremos as vantagens de utilizar a técnica flexbox em nossos próprios layouts.

Alguns ótimos recursos do novo modelo incluem:

• Fácil dimensionamento baseado em taxa; não há necessidade de tocar no seu HTML
• Reordene com uma brisa usando números inteiros dentro da folha de estilo
• Aplica-se a todos os elementos filho dentro de um pai corretamente definido
• Não há mais clearfixes!

Dentro parte 2 vamos dar uma olhada em como levar isso ainda mais longe e transformar seu layout flexbox em um design responsivo completo!

Você usou a abordagem flex box para o layout? Você prefere um método diferente? Deixe-nos saber nos comentários.

Imagem em destaque / miniatura, imagem flexível via Shutterstock.

• ← Como usar o método de layout do Flexbox (parte 2)
• Como otimizar a legibilidade usando a renderização de texto →