css - Flexbox:如何组合可变宽度和固定宽度

Question

我正在尝试实现一个包含三列的网格:

• 第一列宽度为 50%
• 第二列和第三列的宽度也是 50%
• 第三列宽度可变；它应该以看起来合适的方式增长(它包含一个带有可变文本的按钮)。

如果第三列最终占宽度的 x%，则第二列的宽度应为 50-x%。

Answer 1

给第一项 flex-basis: 50% 和中间的 flex-grow: 1。

这将使前 50% 宽，最后一个与其内容一样宽，中间填充剩余空间

.wrapper {
  display: flex;
}

.wrapper .item {
  border: 1px dotted gray;
}

.wrapper .item:first-child {
  flex-basis: 50%;
}

.wrapper .item:nth-child(2) {
  flex-grow: 1;
}

<div class="wrapper">
  <div class="item">50%
  </div>
  <div class="item">Fill remaining
  </div>
  <div class="item">Button
  </div>
</div>