flex实现三栏布局,两边固定,中间宽度自适应
效果图
html部分
<div class="outer">
<div class="right"></div>
<div class="center"></div>
<div class="left"></div>
</div>
CSS部分
.outer{
display: flex;
height: 100%;
width: 100%;
}
.right{
width: 300px;
background-color: red;
height: 300px;
}
.center{
flex: 1;
background-color: yellow;
height: 300px;
}
.left{
width: 300px;
height: 300px;
background-color: blueviolet;
}
利用flex实现三栏布局非常简单