Flexbox Patterns A biblioteca de código Ultimate CSS Flexbox

A mais nova propriedade flexbox do CSS mudou radicalmente a maneira como os desenvolvedores criam interfaces. Não há mais flutuadores e hacks de CSS para alinhar perfeitamente os layouts. Não precisa mais se preocupar com técnicas responsivas personalizadas para lidar com layouts com várias colunas.

Mas mesmo que o flexbox resolva muitos problemas, também é complicado aprender. Para ajudar você a começar, há uma nova biblioteca on-line chamada Flexbox Patterns, que cataloga muitos elementos diferentes de flexbox em um local central..

Esta biblioteca é totalmente grátis para uso e é aberta no GitHub. Todos os exemplos podem ser baixado localmente através do NPM ou através do GitHub. Mas você também pode navegar pelos exemplos através do site para copiar e colar códigos conforme necessário.

Cada padrão tem sua própria página com uma breve descrição e exemplos de código. Você pode literalmente copie e cole os códigos no seu projeto da Web existente, embora seja recomendado que você primeiro aprenda um pouco sobre o que o código faz e por que você o está usando.

Tomemos por exemplo a demonstração da barra de cabeçalho do site usando o flexbox para alinhar todos os elementos em uma barra de navegação superior lado-a-lado.

Normalmente, isso exigiria floats e uma classe clearfix para alinhar tudo corretamente.

Com o flexbox você pode guardar tudo em um container usando o exibição: flex propriedade. Desta forma você pode definir como os elementos devem interagir uns com os outros e como o flexbox deve operar em telas menores.

Os padrões são constantemente atualizados e a biblioteca atual se concentra nos elementos mais comuns, como guias, barras laterais e centralização vertical / horizontal.

Se você é novato no flexbox, confira o Flexbox Patterns. O site não ensinará todos os conceitos básicos do flexbox, mas oferecerá exemplos do mundo real com os quais você pode mexer para seus próprios projetos da Web..