布局例子

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

<header>header</header>   <div id='main'>       <article>article</article>       <nav>nav</nav>       <aside>aside</aside>   </div> <footer>footer</footer> <style>   body { font: 24px Helvetica; }   #main {     min-height: 500px;     margin: 0px;     padding: 0px;     display: flex;     flex-flow: row;   }   #main > article {     margin: 4px;     padding: 5px;     border: 1px solid #cccc33;     border-radius: 7pt;     background: #dddd88;     flex: 3 1 60%;     order: 2;   }   #main > nav {     margin: 4px;     padding: 5px;     border: 1px solid #8888bb;     border-radius: 7pt;     background: #ccccff;     flex: 1 6 20%;     order: 1;   }   #main > aside {     margin: 4px;     padding: 5px;     border: 1px solid #8888bb;     border-radius: 7pt;     background: #ccccff;     flex: 1 6 20%;     order: 3;   }   header, footer {     display: block;     margin: 4px;     padding: 5px;     min-height: 100px;     border: 1px solid #eebb55;     border-radius: 7pt;     background: #ffeebb;   }   /* 窄到已不足以支持三栏 */   @media all and (max-width: 640px) {     #main, #page {       flex-direction: column;     }     #main > article, #main > nav, #main > aside {       /* 恢复到文档内的自然顺序 */       order: 0;     }     #main > nav, #main > aside, header, footer {       min-height: 50px;       max-height: 50px;     }   } </style>