Question

我正在尝试使用搜索，过滤器和按钮构建一个flexbox类型的容器。我无法获得理想的行为。 toolbar-container类是主要的flex容器，它包含search-bar和filter-group作为顶级flex项。我对如何设置filter-group作为嵌套的flex容器感到困惑，所需的行为是将buttons推到行的末尾（最右边，相当于{{1}并且为过滤器提供最大的空间量，在窗口调整大小时包裹在下方，但在两侧保持float: right和search的位置。我尝试使用下面的css从按钮中分离出fitlers，但过滤器和按钮保持组合在一起，如下所示：

buttons - 的 search-bar - 的 filters --------- ------------------------------------------

下面是所需的布局，当空间减少时，只有滤波器环绕下面的空间。

buttons - 的 search-bar ---------------------- ------------------------------- filters

buttons

Answer 1

您需要为flex: 1添加.filter-group以占用所有剩余空间。演示：

＆＃13;

.toolbar-container {
  display: flex;
}

.filter-group {
  display: flex;
  flex: 1; /* new */
  justify-content: space-between;
}

.filters {
  flex-wrap: wrap;
}

＆＃13;

<div class="toolbar-container">
  <div class="search-bar">Search bar</div>
  <div class="filter-group">
    <div class="filters">Filters</div>
    <div class="buttons">Buttons</div>
  </div>
</div>

＆＃13;

具有大量嵌套的Flexbox工具栏

1 个答案: