设计3行3列应用

HTML

<header>Header</header>
<section>
    <article>Article</article>
    <nav>Nav</nav>
    <aside>Aside</aside>
</section>
<footer>Footer</footer>
    					

CSS

/*基本样式*/
* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    color: #fff;
}
body { min-width: 100%; }
header, section, nav, aside, footer { display: block; text-align:center; font-size:2em; font-weight:bold; }
header {
    background-color: hsla(200,10%,70%,.5);
    min-height: 100px;
    padding: 10px 20px;
    min-width: 100%;
}
section {
    min-width: 100%;
}
nav {
    background-color: hsla(300,60%,20%,.9);
    padding: 1%;
    width: 220px;
}
article {
    background-color: hsla(120,50%,50%,.9);
    padding: 1%;

}
aside {
    background-color: hsla(20,80%,80%,.9);
    padding: 1%;
    width: 220px;
}
footer {
    background-color: hsla(250,50%,80%,.9);
    min-height: 60px;
    padding: 1%;
    min-width: 100%;
}
/*flexbox样式*/
body {
    /*设置body为伸缩容器*/
    display: -webkit-box;/*老版本：iOS 6-, Safari 3.1-6*/
    display: -moz-box;/*老版本：Firefox 19- */
    display: -ms-flexbox;/*混合版本：IE10*/
    display: -webkit-flex;/*新版本：Chrome*/
    display: flex;/*标准规范：Opera 12.1, Firefox 20+*/
    /*伸缩项目换行*/
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-direction: normal;
    -moz-box-lines: multiple;
    -webkit-box-lines: multiple;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
}
/*实现stick footer效果*/
section {
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -webkit-box-direction: normal;
    -moz-box-lines: multiple;
    -webkit-box-lines: multiple;
    -ms-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -moz-box-align: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}
article {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
aside {
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
}