<style type="text/css">
.wrap {background: #eee; display: flex}
p {margin: 0; }
.left {width: 200px; height: 200px; background: coral; }
.right {width: 200px; height: 200px; background: lightblue; }
.middle {height: 200px; background: lightpink; flex: 1;}
</style>
<div class="wrap">
<p class="left">我在左边</p>
<p class="middle">我在中间，flex: 1 自动占据剩余空间</p>
<p class="right">我在右边</p>
</div>原理：
flex 布局，子元素默认水平排列。flex: 0 1 auto-> 默认，占据空间不跟随父级放大，跟随变小，自身本来宽度flex: 1 1 auto-> auto，占据空间跟随父级放大，同时跟随变小，自身本来宽度flex: 0 0 auto-> none，占据空间不跟随父级放大，同时也不跟随变小，自身本来宽度flex: 1 1 1-> auto，占据空间跟随父级放大，同时跟随变小，并且自动占满剩余空间