box-flex - CSS: Cascading Style Sheets 编辑

Non-standard

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

This is a property for controlling parts of the XUL box model. It does not match either the old CSS Flexible Box Layout Module drafts for 'box-flex' (which were based on this property) or the behavior of '-webkit-box-flex' (which is based on those drafts). See flexbox for information about the current standard.

The -moz-box-flex and -webkit-box-flex CSS properties specify how a -moz-box or -webkit-box grows to fill the box that contains it, in the direction of the containing box's layout.

/* <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: unset;
-webkit-box-flex: inherit;
-webkit-box-flex: initial;
-webkit-box-flex: unset;

Syntax

The box-flex property is specified as a <number>. If the value is 0, the box does not grow. If it is greater than 0, the box grows to fill a proportion of the available space.

Notes

The containing box allocates the available extra space in proportion to the flex value of each of the content elements.

Content elements that have zero flex do not grow.

If only one content element has nonzero flex, then it grows to fill the available space.

Content elements that have the same flex grow by the same absolute amounts.

If the flex value is set using the element's flex attribute, then the style is ignored.

To make XUL elements in a containing box the same size, set the containing box's equalsize attribute to the value always. This attribute does not have a corresponding CSS property.

A trick to make all content elements in a containing box the same size, is to give them all a fixed size (e.g. height: 0), and the same box-flex value greater than zero (e.g. -moz-box-flex: 1).

Formal definition

Initial value	`0`
Applies to	elements that are direct children of an element with a CSS `display` value of `-moz-box` or `-moz-inline-box` or `-webkit-box` or `-webkit-inline-box`
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

<number>

Examples

Setting box-flex

<!DOCTYPE html>
<html>
  <head>
    <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>

Specifications

Not part of any standard.

Browser compatibility

BCD tables only load in the browser

box-flex - CSS: Cascading Style Sheets 编辑

Non-standard

Syntax

Notes

Formal definition

Formal syntax

Examples

Setting box-flex

Specifications

Browser compatibility

See also

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

box-flex - CSS: Cascading Style Sheets 编辑

Non-standard

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。