box-flex

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

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

警告:這是一個用於控制 XUL 盒模型部件的屬性。它與舊的 CSS 彈性盒佈局模組草案中的 box-flex(基於此屬性)或 -webkit-box-flex 的行為(基於這些草案)都不匹配。有關當前標準的資訊,請參閱彈性盒佈局

-moz-box-flex-webkit-box-flex CSS 屬性指定 -moz-box-webkit-box 如何在其包含盒的佈局方向上增長以填充包含它的盒。

語法

css
/* <number> values */
-moz-box-flex: 0;
-moz-box-flex: 2;
-moz-box-flex: 3.5;
-webkit-box-flex: 0;
-webkit-box-flex: 2;
-webkit-box-flex: 3.5;

/* Global values */
-moz-box-flex: inherit;
-moz-box-flex: initial;
-moz-box-flex: revert;
-moz-box-flex: revert-layer;
-moz-box-flex: unset;
-webkit-box-flex: inherit;
-webkit-box-flex: initial;
-webkit-box-flex: revert;
-webkit-box-flex: revert-layer;
-webkit-box-flex: unset;

box-flex 屬性被指定為一個<number>。如果值為 0,則盒不增長。如果大於 0,則盒按比例增長以填充可用空間的一部分。

注意

包含盒根據每個內容元素的 flex 值按比例分配可用的額外空間。

flex 值為零的內容元素不增長。

如果只有一個內容元素的 flex 不為零,則它會增長以填充可用空間。

具有相同 flex 的內容元素以相同的絕對量增長。

如果 flex 值是使用元素的 flex 屬性設定的,則樣式將被忽略。

要使包含盒中的 XUL 元素大小相同,請將其包含盒的 equalsize 屬性設定為 always。此屬性沒有相應的 CSS 屬性。

使包含盒中所有內容元素大小相同的一個技巧是,給它們都設定一個固定大小(例如,height: 0),並設定相同的 box-flex 值且大於零(例如,-moz-box-flex: 1)。

正式定義

初始值0
應用於CSS display 值為 -moz-box-moz-inline-box-webkit-box-webkit-inline-box 的元素的直接子元素
繼承性
計算值同指定值
動畫型別離散

正式語法

box-flex = 
<number>

示例

設定 box-flex

html
<div class="example">
  <p>I will expand to fill extra space</p>
  <p>I will not expand</p>
</div>
css
div.example {
  display: -moz-box;
  display: -webkit-box;
  border: 1px solid black;
  width: 100%;
}
div.example > p:nth-child(1) {
  -moz-box-flex: 1; /* Mozilla */
  -webkit-box-flex: 1; /* WebKit */
  border: 1px solid black;
}
div.example > p:nth-child(2) {
  -moz-box-flex: 0; /* Mozilla */
  -webkit-box-flex: 0; /* WebKit */
  border: 1px solid black;
}

規範

不屬於任何標準。

瀏覽器相容性

另見