采用flex实现两列，三列等多列的布局
一、两列布局
.main{
display: flex;
height: 200px;
}
.left{
width: 100px;
background-color: #ddd;
color: #fff;
}
.right{
flex:1;
background-color: #222;
color:#fff;
}
<div class="main">
<div class="left">左定宽</div>
<div class="right">右自适应</div>
</div>
image.png
二、三列布局
.main{
display: flex;
height: 200px;
}
.left{
width: 100px;
background-color: #ddd;
color: #fff;
}
.middle{
flex:1;
background-color: #000;
color:#fff;
}
.right{
width: 200px;
background-color: #999;
color: #fff;
}
<div class="main">
<div class="left">左定宽</div>
<div class="middle">中间自适应</div>
<div class="right">右定宽</div>
</div>
image.png
