使用flexbox将项目保存在包装列表的第一行

Question

我需要创建一个具有以下功能的行布局：

行中的第一项具有最小大小，但会扩展以填充任何未使用的空间。

在第一个之后有几个可变长度的动态元素。它们应该在有空间的情况下共享同一行，但如果没有，它们应该全部换行到一个新行。

无论动态元素是否已包装到新行，都应该始终位于顶行的右端。

这是使用flexbox的样子：

<div id="container">
  <div id="start-item">start item</div>
  <div id="end-item">end item</div>
  <div class="dynamic-items">
    <div class="dynamic-item">these</div>
    <div class="dynamic-item">are</div>
    <div class="dynamic-item">dynamic</div>
    <div class="dynamic-item">items</div>
  </div>
</div>

CSS：

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.dynamic-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

}

#start-item {
  flex-grow: 1;
}

#end-item {
  order: 0; // works for single line

  // works for wrapped lines
  margin-left: auto;
  order: 1;
}

有一个问题，那就是如果线条被包裹在动态项目之后，我只能将结束按钮放在正确的位置，如果所有内容都在一条线上，则在它们之前。你可以在这个jsfiddle中看到这个：http://jsfiddle.net/bgmort/6zkxmrj0/。

我放入了一个切换顺序的复选框 - 如果行没有换行，则未选中状态会给出所需的结果，如果行被换行，则检查状态会给出所需的结果。

我怎样才能使这两种情况都能发挥作用？

Answer 1

如果你把所有东西完全保留在小提琴中，但改变了几个css属性，这将有效。

将position: relative; padding-right: 85px;添加到#container。

将position: absolute; right: 5px;添加到#end-item。

只要#end-item没有动态宽度，这就有效。

这是一个有效的分叉小提琴。 http://jsfiddle.net/q09xb41h/