Pronto para baixar conteúdo fluido com propriedade CSS3 “flex”

Eu não tinha nada para fazer no meu trabalho, então pensei que poderia arranhar um pouco com html5 / css3. E escolha raspar um template fluido, mas com cabeçalho, rodapé, nav e aparte fixos.

Hoje é tão fácil fazer essas coisas. Eu só precisava pesquisar e ler um pouco sobre no W3C sobre flex boxes e apenas testá-lo. É realmente muito fácil se você entender. Nunca pensei que pudesse fazer isso sem me preocupar com CSS2 e perder tempo de trabalho para deixar o cliente feliz.

Em 2009 precisei construir este layout e um pouco mais complicado o lado esquerdo e direito tinham caixas internas que tinham que ser fluidas, tudo tinha que ser fluido e mais complicado algumas delas tinham largura fixa. Passei horas e horas e pensei que não poderia fazer isso e também para o IE6 (ai que complicado essa merda). Mas de alguma forma eu terminei e perdi este modelo. E sei que tenho que resolver isso de novo, mas sem o IE6 (hein).
Foi por isso que procurei alguns truques CSS3 e encontrei o flex.
E outro truque útil no CSS2, mas aqueles não ajudaram apenas o que ajudava era a propriedade flex do CSS3. Mas isso não posso usar por causa do IE7-9 …

Mas agora eu sei o que usar quando HTML5 / CSS3 for compatível até 2014: modelo fluido

Nota: Sem comentários, sem otimização, sem pesquisa sobre a semântica do html, se é assim que eu usei no layout. E fique à vontade para divulgar.