记录一波flex默认让div水平小于1200上下排列(重构zan-admin时学习)
缪成天
还是要对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大法(推荐)
<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>
类似资料：