<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局</title>
<style>
.demo1{
padding: 0 200px 0 100px;
background-color: gray;
overflow: hidden;
zoom: 1;
}
.left1,.right1,.content1{
float: left;
position: relative;
}
.left1{
background-color: red;
width: 100px;
height: 100px;
margin-left: -100%;
left: -100px;
}
.right1{
background-color: bisque;
width: 200px;
height: 200px;
margin-left: -200px;
right: -200px;
}
.content1{
background-color: green;
width: 100%;
}
</style>
<style>
.demo2{
margin-top: 100px;
background-color: gray;
overflow: hidden;
zoom: 1;
}
.left2, .right2, .content2 {
float: left;
}
.content2 {
background: green;
width: 100%;
}
.left2{
width: 100px;
height: 100px;
background: red;
margin-left: -100%;
}
.right2 {
width: 200px;
height: 200px;
background: pink;
margin-left: -200px;
}
.inner {
margin: 0 200px 0 100px;
}
</style>
<style>
.demo3{
margin-top: 100px;
background-color: gray;
display: flex;
}
.content3 {
background: green;
order: 2;
flex: 1
/*flex:1 代表 flex-grow: 1; flex-shrink: 1; flex-basis: auto;
flex:initial 代表 flex-grow: 0; flex-shrink: 1; flex-basis: auto;
flex:auto 代表 flex-grow: 1; flex-shrink: 1; flex-basis: auto;
flex:none 代表 flex-grow: 0; flex-shrink: 0; flex-basis: auto;
flex-grow: 0-不扩大， 1-等比例扩大；flex-shrink: 0不缩小，1-等比例缩小;flex-basis:指定了flex元素在主轴方向上的初始大小
*/
}
.left3 {
width: 100px;
height: 100px;
background: red;
order: 1
}
.right3 {
width: 200px;
height: 200px;
background: pink;
order: 3
}
</style>
</head>
<body>
<!--圣杯布局-->
<div class="demo1">
<div class="content1">我是自适应的,要写在前面优先渲染</div>
<div class="left1">左边：我是固定的</div>
<div class="right1">右边：我是固定的</div>
</div>
<!--双飞翼布局-->
<div class="demo2">
<div class="content2">
<div class="inner">我是自适应的,要写在前面优先渲染</div>
</div>
<div class="left2">左边：我是固定的</div>
<div class="right2">右边：我是固定的</div>
</div>
<!--flex布局-->
<div class="demo3">
<div class="content3">我是自适应的,要写在前面优先渲染</div>
<div class="left3">左边：我是固定的</div>
<div class="right3">右边：我是固定的</div>
</div>
</body>
</html>
