Your Search Results


    この記事はまだ日本語に翻訳されていません。MDN の翻訳はボランティアによって行われています。是非 MDN に登録し、私たちの力になって下さい。

    Warning: 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 more information on what you should be using instead of this property.


    The CSS -moz-box-flex and -webkit-box-flex 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. See Flexbox for more about the properties of flexbox elements.


    -moz-box-flex: number      /* Mozilla */
    -webkit-box-flex: number   /* WebKit */


    The box does not grow.
    > 0
    The box grows to fill a proportion of the available space.


    <!DOCTYPE html>
        <title>-moz-box-flex example</title>
          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;
        <div class="example">
          <p>I will expand to fill extra space</p>
          <p>I will not expand</p>


    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).


    This property is a nonstandard extension.  There was an old draft of the CSS3 Flexbox specification that defined a box-flex property, but that draft is over two years old and has since been superseded.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support Not supported (Yes) Not supported Not supported Not supported
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support Not supported Not supported ? Not supported Not supported Not supported

    See also

    -moz-box-orient, -moz-box-pack, -moz-box-direction, flex



    最終更新者: SJW,