源代碼
點擊運行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; font-weight: bold; text-align: center; } .flex-container > * { padding: 10px; flex: 1 100%; } .main { text-align: left; background: cornflowerblue; } .header {background: coral;} .footer {background: lightgreen;} .aside1 {background: moccasin;} .aside2 {background: violet;} @media all and (min-width: 600px) { .aside { flex: 1 auto; } } @media all and (min-width: 800px) { .main { flex: 3 0px; } .aside1 { order: 1; } .main { order: 2; } .aside2 { order: 3; } .footer { order: 4; } } </style> </head> <body> <div class="flex-container"> <header class="header">頭部</header> <article class="main"> <p>教程 - 學的不僅是技術,更是夢想!教程(www.sharebody.com)提供了最全的編程技術基礎教程, 介紹了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各種編程語言的基礎知識。 同時本站中也提供了大量的在線實例,通過實例,您可以更好的學習編程。</p> </article> <aside class="aside aside1">邊欄 1</aside> <aside class="aside aside2">邊欄 2</aside> <footer class="footer">底部</footer> </div> </body> </html>
運行結果