Lembre-se dos (não tão) bons e velhos tempos da web, quando projetávamos nossas páginas usando tables</code> (nested within more tables) and those really cool framesets</code>?We are so much better now that we have the box model, a more elegant and structured way to accomplish this task. The box model is here to stay! ... Isn't it?
Bem, acontece que o layout das páginas com floats</code> and clearfixes</code> is not so elegant after all.But it's not our fault! We did what we can with what we've got, and we didn't have anything better at the time. Well, now we do.
<h2> O que é Flexbox? </h2>
Você provavelmente já ouviu falar dele. O modelo de caixa flexível ( Flexbox para abreviar) é uma maneira de pensar sobre layout, combinado com um punhado de novas propriedades CSS, que irão mudar a maneira como começamos a codificar nossas páginas da web.
A melhor coisa sobre o Flexbox é que ele é otimizado para design de IU, o que significa que não vamos usar algo que foi projetado para uma finalidade diferente (tabelas, floats) ou aplicar “hacks” para fazer funcionar. Usaremos a ferramenta certa para o trabalho, e ela vem com alguns benefícios:
<ul>
<li> <b> Os filhos de um contêiner “flex” aumentam para usar o espaço disponível ou diminuem para evitar o estouro </b> <br/> Você já tentou fazer colunas de altura igual com CSS? Então você sabe que é uma dor. </li>
<li> <b> Fácil manipulação do alinhamento vertical e horizontal </b> <br/> Não preciso lhe dizer como é difícil centralizar um elemento verticalmente . </li>
<li> <b> Ordem e orientação </b> <br/> Você não apenas se livrará dofloat: left;</code>, float: right;</code> hacks, but you will also be able to visually re-order your elements (i.e. taking your header navigation to the bottom of the page in a responsive design) without touching a line of your HTML nor relying on heavy Javascript.</li></ul>
E tem mais …
Mas para manter isso como uma “dica” em vez de um artigo completo, vou deixar você continuar a partir daqui. Apenas dois conselhos:
Para obter as informações mais recentes e completas sobre Flexbox, você deve verificar o <a href=” http://dev.w3.org/csswg/css3-flexbox/ “target=”_blank”> W3C Editor’s Draft </a> ( atualizado em 28 de agosto de 2012). É longo, mas vale a pena.
Se você preferir que o Google procure artigos explicados, sinta-se à vontade para fazê-lo, mas tenha em mente uma coisa muito importante : o
Flexbox já existe há pelo menos 4 anos e sofreu muitas mudanças em suas especificações, resultando em muitos artigos realmente bons, mas desatualizados.
Leia <a href=” http://css-tricks.com/old-flexbox-and-new-flexbox/ “target=”_blank”> esta postagem de Chris Coyier </a> para distinguir entre” antigo “Flexbox e” novas “postagens do Flexbox.
Feliz Flexboxing!