圣杯布局(双飞翼)
利用flex实现两边固定,中间随着浏览器宽度变化而变化的布局。
代码部分
css部分
.box{display:flex;}
.box1{
width: 200px;
height: 500px;
background: red;
}
.box2{
height: 530px;
background: orange;
flex:1;
}
.box3{
width: 200px;
height: 500px;
background: red;
}
body部分
<!--圣杯布局-->
<div class="box">
<div class="box1">左</div>
<div class="box2">中</div>
<div class="box3">右</div>
</div>