还是要对flex布局比较熟悉的才能做出来，如果不熟悉的话，建议还是用传统的
float display: inline-block; 这种方式来做，
第一种:多用flex中的相关属性布局
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>zan-admin</title> <script src="static/js/checkie&edge.js"></script> <link href="static/css/bootstrap.css" rel="stylesheet"> <link href="static/css/zan-admin.css" rel="stylesheet"> <style> header { top: 0; left: 0; right: 0; height: 52px; /* 固定布局 */ position: fixed; display: flex; } .left { height: inherit; /* 左侧菜单的宽度 */ /* 这个属性也是指定宽度的 */ /* flex-basis: 240px; */ width: 240px; background-color: #e7e7e7; } .right { height: inherit; /* 占满剩下所有的宽度 */ /* 注意：这里设置100%宽度是没有用的，则.left设置的宽度将会失效，因为100%是表示整个主轴的不是扣掉240px剩下的 */ /* 小结:flex中要控制宽度啥的还是要注意，里面还是有些学问的; */ /* width: 100%; */ /* width: 50px; */ flex-grow:1; background-color: #cccc; } main { padding-top: 52px; } @media screen and (max-width: 1200px) { header { display: flex; /* 注意：这个换行属性，是占满主轴宽度的时候才会换行，会换行的原因是下面设置了flex-basis: 100%; */ flex-wrap: wrap; } .left { width: 100%; } /* 缩小时变成距离顶部104px */ main { padding-top: 104px; } } </style> </head> <body> <header> <div class="left"> left</div> <div class="right">right </div> </header> <main> 这是主要内容 </main> <script src="static/js/jquery.min.js"></script> <script src="static/js/bootstrap.min.js"></script> </body> </html>第二种：min-width大法(推荐)
zan-admin <header> <div class="left"> left</div> <div class="right">right </div> </header> <main> 这是主要内容 </main> <script src="static/js/jquery.min.js"></script> <script src="static/js/bootstrap.min.js"></script>第三种：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet"> <title>zan-admin</title> <style> html,body { background-color: red; overflow-x: hidden; } .container { background-color: green; position: fixed; top: 0; left: 0; bottom: 0; border: 1px solid #666666; width: 240px; } .brand { height: 52px; background-color: transparent } .side { background-color: #e7e7e7; top: 52px; position: absolute; overflow-y: auto; bottom: 0; left: 0; right: 0; } button { margin-left: 250px; } @media screen and (max-width: 1200px) { .container { background-color: tomato; transform: translateX(-100%); } .container.ani { transition: 0.3s; } .container.move { transform: translateX(0); } .container.back { transform: translateX(-100%); } } </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function () { var t = false; $('button').on("click", function () { t = !t; if (t) { // console.log("ddd") $('.container').addClass('ani').removeClass('back').addClass('move'); } else { // $('.container').addClass('ani').addClass('move'); $('.container').addClass('ani').removeClass('move').addClass('back'); // console.log("aaaa") } // }); }); </script> </head> <body> <div class="container"> <div class="brand"> toubu </div> <div class="side"> <h1>内容begin</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容</h1> <h1>内容end</h1> </div> </div> <button>toggle</button> </body> </html>