box-flex

非标准：此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

已弃用：不再推荐使用此功能。尽管某些浏览器可能仍然支持它，但它可能已从相关的 Web 标准中删除，可能正在被删除过程中，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅此页面底部的兼容性表，以指导您的决策。请注意，此功能可能随时停止工作。

警告：这是一个用于控制 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

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>-moz-box-flex example</title>
    <style>
      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;
      }
    </style>
  </head>
  <body>
    <div class="example">
      <p>I will expand to fill extra space</p>
      <p>I will not expand</p>
    </div>
  </body>
</html>

box-flex

语法

注释

正式定义

正式语法

示例

设置 box-flex

规范

浏览器兼容性

另请参阅