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>