采用flex實(shí)現(xiàn)兩列呼股，三列等多列的布局
一、兩列布局
.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">右自適應(yīng)</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">中間自適應(yīng)</div>
<div class="right">右定寬</div>
</div>
image.png
