Alguns layouts que ficam muito mais simples com o uso da nova especificação Flexbox (http://www.w3.org/TR/css3-flexbox/). Acesse os links abaixo e veja as demonstrações no seu próprio navegador. Aproveite para testar o comportamento responsivo das páginas: redimensione a janela do seu navegador e veja como os layouts se adaptam.
- Três caixas (usando width)
- Três caixas (usando flexbox)
- Quatro caixas (usando width; compare os CSS!)
- Quatro caixas (usando flexbox; compare os CSS!)
- Footer (usando position)
- Footer (usando flexbox)
- Cabeçalho e rodapé fixos
- Ordem visual diferente da ordem no código. Nota: este demo não funciona no Firefox por enquanto. Veja o bug cadastrado no bugtracker do navegador.
Nota: verifique se seu navegador já suporta o uso do Flexbox aqui. Navegadores suportados até o momento (12/07/2013):
- Firefox (ainda sem suporte completo)
- Chrome
- Safari
- IE a partir da versão 10
- Opera a partir da versão 12.1