image.png
<h3>右側(cè)自適應(yīng)寬度</h3>
<div class="main1">
<div class="left">left</div>
<div class="right">right</div>
</div>
<h3>中間自適應(yīng)寬度</h3>
<div class="main2">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
<h3>底部自適應(yīng)高度</h3>
<div class="main3">
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
CSS
右側(cè)自適應(yīng)寬度
.main1{
width: 100%;
height: 150px;
display: flex;
border: 1px solid red;
margin: 20px 0;
box-sizing: border-box;
}
.main1 .left{
width:100px;
}
.main1 .right{
flex:auto;
background: #999;
}
中間自適應(yīng)寬度
.main2{
width: 100%;
height: 150px;
display: flex;
border: 1px solid rgb(0, 255, 119);
margin: 20px 0;
box-sizing: border-box;
}
.main2 .left{
width:100px;
}
.main2 .middle{
flex:auto;
background: #999;
}
.main2 .right{
width:100px;
}
底部自適應(yīng)高度
注意： flex-direction: column;
.main3{
width: 200px;
height: 300px;
display: flex;
flex-direction: column;
border: 1px solid red;
margin: 20px 0;
box-sizing: border-box;
}
.main3 .top{
width: 100%;
height:100px;
}
.main3 .bottom{
flex:auto;
background: #999;
}
