刚学习弹性盒布局，实现下面的页面规划（故意弄复杂点看看如何实现）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .myscreen { display: flex; min-height: 100vh; flex-direction: column; text-align: center; } topinfo { height: 50px; background:red; } header, footer { height: 60px; background:#aaa; } .main { display: flex; flex: 1; } .content { flex: 1; background: #ccc; } .a,.b{ display: flex; height: 50%; } .a { background: chartreuse; display: flex; flex-direction: row; } .a1{ background: darkmagenta; } .a2{ background:darkorange; } .a1,.a2{ height: 100%; width: 50%; } .b { background: cyan; } .nav, .ads { /* 两个边栏的宽度设为12em */ flex: 0 0 12em; } .ads { background: yellow; } .nav { /* 导航放到最左边 */ order: -1; background: red; } </style> </head> <body class="myscreen"> <topinfo>topinfo</topinfo> <header>header</header> <div class="main"> <nav class="nav">nav</nav> <main class="content"> <div class="a"> <div class="a1">a1</div> <div class="a2">a2</div> </div> <div class="b">b</div> </main> <aside class="ads">aside</aside> </div> <footer>footer</footer> </body> </html>