使用 Flexbox 的解决方案
如果你想用 Flexbox 有一个固定宽度的列，你需要使用 CSS flex 或者 flex-basis 属性。
首先，我们将 <div> 容器的显示设置为“flex”。
然后，我们将“灰色”类的 flex 指定为“0 0 50px”。
其中第一个值指定 flex-grow，第二个值定义 flex-shrink，最后一个指定 flex-basis。
对于“green”和“blue”类，我们将 flex 设置为 1.
使用 Flexbox 设置固定宽度列的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.flexbox {
display: flex;
}
.grey {
background: #adadad;
flex: 0 0 50px;
}
.green {
background: #32c962;
flex: 1;
}
.blue {
background: #3b66db;
flex: 1;
}
</style>
</head>
<body>
<div class="flexbox">
<div class="grey">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
</body>
</html>
日期：2020-06-02 22:14:54 来源：oir作者：oir