如何让最后一项仅在换行到下一行时才填充剩余空间

Question

我有一个带有

flex-wrap:wrap

集的弹性容器。有没有办法让最后一个弹性项目（示例中的未知按钮）填充剩余空间仅当它被包装到新行时？如果它没有换行到下一行，它就不应该增长。

现在我将

flex: 1000 1 0

设置为前一项，将

flex:1

设置为最后一项。这看起来非常错误和老套，所以我想知道这样做的正确方法是什么。

（请注意，解决方案不应依赖于容器的宽度，其宽度设置为 300px 只是为了演示目的。）

.ut_text {
  min-width: 150px!important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="m-2 border border-primary" style="width:300px">
  <div class="input-group">
    <div class="input-group flex-nowrap" style="flex: 1000 1 0;">
      <input type="text" placeholder="I am placeholder" class="form-control ut_text"/>
      <div class="input-group-append ut_button">
        <a class="form-control btn btn-dark">
              Search
            </a>
      </div>
    </div>
    
    <div class="input-group-append ut_button" style="flex: 1;">
      <a class="form-control btn btn-outline-danger">Unknown</a>
    </div>
  </div>
</div>

Answer 1

你可以对 Flexbox 容器中的项目使用这个 Flex 规则，它会做到这一点：flex-grow 为 1，flex-shrink 为 0，flex-basis 为 auto，快捷方式在这里：

.flex-item {
   flex: 1 0 auto;
}

然后你可以删除你的内联样式，codepen在这里：https://codepen.io/unsleeping/pen/oNVzYdL