CSS3实现常见的自适应布局，弹性布局

image.png

 <h3>右侧自适应宽度</h3>
    <div class="main1">
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    
    <h3>中间自适应宽度</h3>
    <div class="main2">
      <div class="left">left</div>
      <div class="middle">middle</div>
      <div class="right">right</div>
    </div>

    <h3>底部自适应高度</h3>
    <div class="main3">
      <div class="top">top</div>
      <div class="bottom">bottom</div>
    </div>

CSS

右侧自适应宽度

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

中间自适应宽度

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

底部自适应高度

注意： 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;
    }