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/

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

1 个答案: