有很多嵌套的Flexbox工具欄

Question

我正嘗試用搜索和過濾器和按鈕構建一個flexbox類型的容器。我無法獲得理想的行爲。 toolbar-container類是主要彈性容器，其中包含search-bar和filter-group作爲頂級彈性項目。我很困惑如何設置filter-group作爲一個嵌套的柔性容器，期望的行爲是將buttons推到行的末尾（最右邊，相當於float: right），併爲過濾器提供最大的空間量，當窗口調整大小時將其包裹在下方，但在任一側保持search和buttons的位置。我已經使用了下面的CSS單獨從按鈕fitlers嘗試，但有過濾器和按鈕保持組合在一起就像這樣：

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

下面是所需的佈局，當空間減少時只有過濾器纏繞到下面的空間。

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

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


.toolbar-container { 
    display: flex; 
} 

.search { 

} 

.filter-group { 
    display: flex; 
    justify-content: space-between; 
} 

.filters { 
    flex-wrap: wrap; 
} 

.buttons { 

} 

Answer 1

您需要添加flex: 1你.filter-group採取所有剩餘空間。演示：

.toolbar-container { 
 
    display: flex; 
 
} 
 

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

 
.filters { 
 
    flex-wrap: wrap; 
 
}

<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>