设计3栏页面

HTML

<div class="page-wrap">
    <section class="main-content">
        <h1>水调歌头·明月几时有</h1>
        <h2>苏轼</h2>
        <p>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</p>
        <p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？</p>
        <p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>

    </section>
    <nav class="main-nav">
        <h2>宋词精选</h2>
        <ul>
            <li><a href="">卜算子·咏梅</a></li>
            <li><a href=""> 声声慢·寻寻觅觅</a></li>
            <li><a href=""> 雨霖铃·寒蝉凄切</a></li>
            <li><a href="">卜算子·咏梅</a></li>
            <li><a href="">更多</a></li>
        </ul>
    </nav>
    <aside class="main-sidebar">
        <h2>词人列表</h2>
        <ul>
            <li><a href="">陆游</a></li>
            <li><a href="">李清照</a></li>
            <li><a href="">苏轼</a></li>
            <li><a href="">柳永</a></li>
        </ul>
    </aside>
</div>
    					

CSS

.page-wrap {
    display: -webkit-box;           /* 2009版 - iOS 6-, Safari 3.1-6 */
    display: -moz-box;              /* 2009版 - Firefox 19- (存在缺陷) */
    display: -ms-flexbox;           /* 2011版 - IE 10 */
    display: -webkit-flex;          /* 最新版 - Chrome */
    display: flex;                  /* 最新版 - Opera 12.1, Firefox 20+ */
}
.main-content {
    -webkit-box-ordinal-group: 2;   /* 2009版 - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2;      /* 2009版 - Firefox 19- */
    -ms-flex-order: 2;              /* 2011版 - IE 10 */
    -webkit-order: 2;               /* 最新版 - Chrome */
    order: 2;                       /* 最新版 - Opera 12.1, Firefox 20+ */
    width: 60%;                     /* 不会自动伸缩,其他列将占据空间 */
    -moz-box-flex: 1;               /* 如果没有该声明，主内容（60%）会伸展到和最宽的段落，就像是段落设置了white-space:nowrap */
    background: white;
}
.main-nav {
    -webkit-box-ordinal-group: 1;   /* 2009版 - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 1;      /* 2009版 - Firefox 19- */
    -ms-flex-order: 1;              /* 2011版 - IE 10 */
    -webkit-order: 1;               /* 最新版 - Chrome */
    order: 1;                       /* 最新版 - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1;            /* 2009版 - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;               /* 2009版 - Firefox 19- */
    width: 20%;                     /* 2009版语法, 否则将崩溃 */
    -webkit-flex: 1;                /* Chrome */
    -ms-flex: 1;                    /* IE 10 */
    flex: 1;                        /* 最新版 - Opera 12.1, Firefox 20+ */
    background: #ccc;
}
.main-sidebar {
    -webkit-box-ordinal-group: 3;   /* 2009版 - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 3;      /* 2009版 - Firefox 19- */
    -ms-flex-order: 3;              /* 2011版 - IE 10 */
    -webkit-order: 3;               /* 最新版 - Chrome */
    order: 3;                       /* 最新版, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1;            /* 2009版 - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;               /* Firefox 19- */
    width: 20%;                     /* 2009版，否则将崩溃 */
    -ms-flex: 1;                    /* 2011版 - IE 10 */
    -webkit-flex: 1;                /* 最新版 - Chrome */
    flex: 1;                        /* 最新版 - Opera 12.1, Firefox 20+ */
    background: #ccc;
}
.main-content, .main-sidebar, .main-nav { padding: 1em; }
body {
    padding: 2em;
    background: #79a693;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
h1, h2 {
    font: bold 2em Sans-Serif;
    margin: 0 0 1em 0;
}
h2 { font-size: 1.5em; }
p { margin: 0 0 1em 0; }