box-flex-group

非標準:此特性未標準化。我們不建議在生產環境中使用非標準特性,因為它們瀏覽器支援有限,並且可能會更改或被移除。但是,在沒有標準選項的特定情況下,它們可以是合適的替代方案。

已棄用:此特性不再推薦。雖然某些瀏覽器可能仍然支援它,但它可能已經從相關的網路標準中刪除,可能正在刪除過程中,或者可能僅為相容性目的而保留。請避免使用它,如果可能,請更新現有程式碼;請參閱本頁底部的相容性表格以指導您的決策。請注意,此特性可能隨時停止工作。

警告:這是原始 CSS 彈性盒佈局模組草案的一個屬性。它已被規範取代。請參閱彈性盒,瞭解當前標準的資訊。

box-flex-group 是一個 CSS 屬性,它將彈性盒(flexbox)的子元素分配到一個彈性組中。

對於分配到彈性組的彈性元素,第一個彈性組是 1,更高的值指定後續的彈性組。初始值是 1。在分配盒子的額外空間時,瀏覽器首先考慮第一個彈性組中的所有元素。該組中的每個元素根據其彈性與同一彈性組中其他元素的彈性的比率獲得額外空間。如果組中所有彈性子元素的空間都已增加到最大,則對下一個彈性組中的子元素重複此過程,使用上一個彈性組剩餘的任何空間。一旦沒有更多的彈性組,並且仍有剩餘空間,額外空間將根據 box-pack 屬性在包含框內分配。

如果在計算子元素的首選空間後盒子會溢位,那麼將以類似於新增額外空間的方式從彈性元素中移除空間。每個彈性組依次檢查,並根據每個元素的彈性比率移除空間。元素不會縮小到其最小寬度以下。

語法

css
/* <integer> values */
box-flex-group: 1;
box-flex-group: 5;

/* Global values */
box-flex-group: inherit;
box-flex-group: initial;
box-flex-group: unset;

box-flex-group 屬性指定為任何正 <integer>

正式定義

初始值1
應用於盒元素的流內子元素
繼承性
計算值同指定值
動畫型別離散

正式語法

box-flex-group = 
<integer>

示例

基本用法示例

在最初的彈性盒規範中,box-flex-group 可用於將彈性子元素分配到不同的組中,以分配彈性空間

css
article:nth-child(1) {
  -webkit-box-flex-group: 1;
}

article:nth-child(2) {
  -webkit-box-flex-group: 2;
}

這僅在基於 WebKit 的瀏覽器中帶有字首得到了支援,並且在規範的後續版本中,此功能沒有等效項。相反,彈性容器內空間的分配現在透過 flex-basisflex-growflex-shrink 來處理。

規範

不屬於任何標準。

瀏覽器相容性

另見