是什么

在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高

两栏布局

• 特性： 左边固定，右边自适应

比如很多后台管理系统，antd等

浮动布局

  <style>
    .box{overflow: hidden;}
    .left{
      float: left;
      width: 200px;
      height: 200px;
      background-color: green;
    }
    .right{
      margin-left: 200px;
      height: 300px;
      background-color: #eee;
    }
  </style>
  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
  </div>

flex布局

  <style>
    .box2{
      display: flex;
    }
    .left2{
      width: 200px;
      background-color: green;
    }
    .right2{
      flex: 1;
      background-color: #eee;
    }
  </style>
  <div class="box2">
    <div class="left2"></div>
    <div class="right2"></div>
  </div>

三栏布局

• 特性： 两边固定，中间自适应

比如github

flex布局 （grid类似）

  <style>
    .left,
    .right,
    .middle {
        height: 100px;
    }
    .box1{
      display: flex;
    }
    .box1 .left{
      width: 200px;
      background-color: green;
    }
    .box1 .middle{
      flex: 1;
      background-color:azure
    }
    .box1 .right{
      width: 200px;
      background-color:burlywood;
    }
  </style>
  <div class="box1">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>

float + margin

<style>
  .box2{
    overflow: hidden;
  }
  .box2 .left{
    width: 200px;
    float: left;
    background-color: green;
  }
  .box2 .middle{
    width: 100%;
    background-color:azure;
    margin:0 200px 0 200px;
  }
  .box2 .right{
    width: 200px;
    float: right;
    background-color:burlywood;
  }
</style>
<div class="box2">
  <div class="left"></div>
  <div class="right"></div>
  <div class="middle"></div>
</div>

两边定位absolute 中间margin

<style>
  .box3{
    overflow: hidden;
    display:table;
  }
  .box3 .left{
    width: 200px;
    background-color: green;
    position: absolute;
    left: 0;
    top: 0;
  }
  .box3 .middle{
    width: 100%;
    background-color:azure;
    margin:0 200px;
  }
  .box3 .right{
    width: 200px;
    background-color:burlywood;
    position: absolute;
    right: 0;
    top: 0;
  }
</style>
<div class="box3">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

table布局(不适用)

<style>
  .box4{
    overflow: hidden;
    /* display: table; */
  }
  .box4 .left{
    width: 200px;
    background-color: green;
    display: table-cell;
  }
  .box4 .middle{
    width: 500px;
    background-color:azure;
    display: table-cell;
  }
  .box4 .right{
    width: 200px;
    background-color:burlywood;
    display: table-cell;
  }
</style>
<div class="box4">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>