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;
    }