flex PC端基本布局 · wml_code

![](https://img.kancloud.cn/a3/79/a379936bc1aaec77d681932507282a13_1890x720.png) ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>pc端通用的布局參考</title> <style> /* 初始化 */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #666; } body { /* 將整個body看成flex容器 */ min-width: 650px; display: flex; /* 主軸垂直,不換行 */ flex-flow: column nowrap; } /* 頁眉與頁腳的共用樣式 */ header, footer { height: 50px; border: 1px solid #000; } /* 頁眉樣式 */ header { display: flex; align-items: center; } header > a { flex: 0 1 100px; text-align: center; } /* 登錄放在最右邊 */ header > a:last-of-type { margin-left: auto; } header > a:first-of-type { margin-right: 50px; } header > a:hover:not(:first-of-type) { color: coral; background-color: red; } /* 主體 */ .container { min-height: 600px; margin: 10px auto; display: flex; justify-content: center; } /* 側邊欄與內容區共用樣式 */ .container > aside, .container > main { border: 1px solid #000; padding: 10px; box-sizing: border-box; } .container > aside { flex: 0 0 200px; } .container > main { flex: 0 0 600px; margin: 0 10px; } footer { display: flex; flex-flow: column nowrap; text-align: center; } /* 媒體查詢 */ /* 注意屏幕大小的順序, 必須從大往小里寫 */ @media screen and (max-width: 900px) { aside:last-of-type { display: none; } } @media screen and (max-width: 700px) { aside, footer, header > a:not(:first-of-type):not(:last-of-type) { display: none; } } </style> </head> <body>  <header> <a href="">LOGO</a> <a href="">首頁</a> <a href="">欄目1</a> <a href="">欄目2</a> <a href="">欄目3</a> <a href="">欄目4</a> <a href="">登錄</a> </header>  <div class="container">  <aside>左邊欄</aside>  <main>主體內容區</main>  <aside>右邊欄</aside> </div>  <footer> <p> php中文網 ©版權所有   (2018-2022) | 備案號: <a href="">皖ICP-18********</a> </p> <p>中國.合肥市政務新區999號 | 電話: 0551-888999**</p> </footer> </body> </html> ```