先理解 flex：flex-grow flex-shrink flex-basis
用来分配剩余空间
用来分配溢出空间
在前两个分配前使用，简单的说这个属性值可以理解为元素的 width 值；如果 flex-basis 和 width 其中有一个是 auto，那么另外一个非 auto 的属性优先级会更高。同时赋值时，flex-basis 的优先级更高
<body>
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
内容内容内容
</body>
思路：
flex: 1 1 0%;.box {
display:flex; /*关键*/
}
.left {
width: 200px; /*关键*/
background-color: gray;
height: 400px;
}
.right {
flex: 1; /*关键*/
margin-left: 10px;
background-color: lightgray;
height: 200px;
}
<div class="box">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
</div>
思路：
flex: 1 1 0%;.box {
display: flex;
}
.left {
background-color: gray;
width: 200px;
height: 200px;
}
.right {
background-color: gray;
width: 200px;
height: 200px;
}
.middle {
flex: 1 1 0%;
background-color: lightgray;
}
原文：https://www.cnblogs.com/xuchengrui/p/13173015.html