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;
}
规范
不属于任何标准。
浏览器兼容性
加载中…