box-flex
非標準:此特性未標準化。我們不建議在生產環境中使用非標準特性,因為它們瀏覽器支援有限,並且可能會更改或被移除。但是,在沒有標準選項的特定情況下,它們可以是合適的替代方案。
已棄用:此特性不再推薦。雖然某些瀏覽器可能仍然支援它,但它可能已經從相關的網路標準中刪除,可能正在刪除過程中,或者可能僅為相容性目的而保留。請避免使用它,如果可能,請更新現有程式碼;請參閱本頁底部的相容性表格以指導您的決策。請注意,此特性可能隨時停止工作。
警告:這是一個用於控制 XUL 盒模型部件的屬性。它與舊的 CSS 彈性盒佈局模組草案中的 box-flex(基於此屬性)或 -webkit-box-flex 的行為(基於這些草案)都不匹配。有關當前標準的資訊,請參閱彈性盒佈局。
-moz-box-flex 和 -webkit-box-flex CSS 屬性指定 -moz-box 或 -webkit-box 如何在其包含盒的佈局方向上增長以填充包含它的盒。
語法
/* <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)。
正式定義
正式語法
box-flex =
<number>
示例
設定 box-flex
<div class="example">
<p>I will expand to fill extra space</p>
<p>I will not expand</p>
</div>
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;
}
規範
不屬於任何標準。
瀏覽器相容性
載入中…