[CSS]使用flex实现二联三联布局

1. 使用flex实现二联布局

思路：左侧为固定width，右侧为所有

<style type="text/css">
  .wrap {
    display: flex;
    justify-content: space-between;
  }
​
  .left,
  .right,{
    height: 100px;
  }
​
  .left {
    width: 200px;
    background: coral;
  }
​
  .right {
    flex:1;
    background: lightblue;
  }
​
  }
</style>
<div class="wrap">
  <div class="left">左侧</div>
  <div class="right">右侧</div>
</div>

2. 使用flex实现三联布局

<style type="text/css">
  .wrap {
    display: flex;
    justify-content: space-between;
  }
​
  .left,
  .right,
  .middle {
    height: 100px;
  }
​
  .left {
    width: 200px;
    background: coral;
  }
​
  .right {
    width: 120px;
    background: lightblue;
  }
​
  .middle {
    background: #555;
    width: 100%;
    margin: 0 20px;
  }
</style>
<div class="wrap">
  <div class="left">左侧</div>
  <div class="middle">中间</div>
  <div class="right">右侧</div>
</div>