html - 使用 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

如果您将 fiddle 中的所有内容保持原样，但更改几个 css 属性，这将起作用。

添加position:relative； padding-right: 85px; to #container.

添加position:absolute；右:5px; 到 #end-item。

只要 #end-item 没有动态宽度，它就可以工作。

这是一个正在工作的 fork fiddle 。 http://jsfiddle.net/q09xb41h/