css - CSS填充左右div，而中心div具有固定宽度

Question

我在一个包装器 div 中有三个 div，当中心 div 具有固定大小时，无论包装器大小如何，我都想填充左右 div。

所以，我想要的结果类似于下图。

我怎样才能做到这一点？

.wrapper{
  background-color: red;
  height: 200px;
  width: 100%;
  display:flex;
  flex-direction:row;
}
.left{
  background-color: blue;
}
.center{
  background-color: yellow;
  width: 200px;
  margin-left:auto;
  margin-right:auto;
}
.right{
  background-color: blue;
}

<div class="wrapper">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>

标签： css

Answer 1

添加flex-grow: 1;到左右 div 中：

.wrapper{
  background-color: red;
  height: 200px;
  width: 100%;
  display:flex;
  flex-direction:row;
}
.left{
  background-color: blue;
}
.center{
  background-color: yellow;
  width: 200px;
  margin-left:auto;
  margin-right:auto;
}
.right{
  background-color: blue;
}

.left, .right {
flex-grow: 1;
}

<div class="wrapper">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow