CSS3实现“圣杯布局”--（固比固布局）

<header>header</header>
<section>
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</section>
<footer>footer</footer>

*{margin:0;padding:0;box-sizing:border-box;}
html,
body{
height:100%;color:#fff;
}
body{
min-width:100%;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:start;
justify-content:start;
}
header,
section,
nav,
aside,
footer{
display:block;
}
header{
background-color: red;
min-height:100px;
padding:10px 20px;
widht:100%;
-webkit-order:1;
}
section{
min-width:100%;
margin:20px 0;
display:-webkit-flex;
-webkit-order:2;
-webkit-flex:1;
}
nav{
background-color: #ccc;
padding:1%;
width:220px;
-webkit-order:1;
}
article{
background-color:blue;
padding:1%;
margin-left:2%;
margin-right:2%;
-webkit-flex:1;
-webkit-order:2;
}
aside{
background-color: green;
padding:1%;
width:220px;
-webkit-order:3;
}
footer{
background-color: #e5e5e5;
min-height: 60px;
min-width:100%;
-webkit-order:3;
}