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> ```