pc端的布局页面
代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ box-sizing: border-box; margin: 0; padding: 0; } body{ display: flex; flex-flow: column nowrap; } a{ text-decoration: none; } header{ background-color: aquamarine; display: flex; flex-flow: row nowrap; height: 50px; border: 1px solid black; } header > a { flex: 1 1;text-align: center;align-self: center; }header > a:last-of-type{color: chocolate;}header > a:hover{ color: crimson;}.box { display: flex; flex-flow: row nowrap; min-height: 20em; justify-content: center; margin-top: 3em; margin-bottom: 3em;}aside, main{ border: 1px solid; text-align: center;}aside{ flex: 0 0 10em;}main{ flex: 0 0 30em; margin-left: 2em; margin-right: 2em;} footer{ background-color: aquamarine; display: flex; flex-flow: column nowrap; /* height: 80px; */ border: 1px solid black; justify-content: center; align-items: center; } footer > p{ } @media screen and (max-width:880px){ .box{ flex-flow: column wrap; } aside{ flex: 0 0 5em; margin-left: 2em; margin-right: 2em; } main{ flex: 0 0 20em; } } /* @media screen and (max-width:700px){ .box{ flex-flow: column wrap; } } */ </style></head><body> <header> <a href="">LOGO</a> <a href="">首页</a> <a href="">视频教程</a> <a href="">入门教程</a> <a href="">社区问答</a> <a href="">技术文章</a> <a href="">登录</a> </header><div class="box"><aside>左侧栏</aside><main>主栏</main><aside>右侧栏</aside></div> <footer> <p>php中文网：公益在线php培训，帮助PHP学习者快速成长！</p> <p>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1</p> </footer></body></html>
效果如下：
情况1：当浏览器宽度>880px时，画面如图：
情况2：当浏览器宽度<880px时，画面如图：
