-moz-box-flex

  • Revision slug: CSS/-moz-box-flex
  • Revision title: -moz-box-flex
  • Revision id: 9978
  • Created:
  • Creator: MKaply
  • Is current revision? No
  • Comment 2 words added, 4 words removed

Revision Content

{{ CSSRef() }}

{{ warning("This is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.") }}

See Flexbox for more information.

Summary

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.

  • {{ Xref_cssinitial() }}: 0
  • Applies to: elements that are direct children of an element with a CSS {{ Cssxref("display") }} value of {{ Cssxref("-moz-box") }} or {{ Cssxref("-moz-inline-box") }} or {{ Cssxref("-webkit-box") }} or {{ Cssxref("-webkit-inline-box") }}
  • {{ Xref_cssinherited() }}: no
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

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

Values

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

Examples

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <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>
    <div class="example">
      <p>I will expand to fill extra space</p>
      <p>I will not expand</p>
    </div>
  </body>
</html>

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

Specifications

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.

See also

{{ cssxref("-moz-box-orient") }}, {{ cssxref("-moz-box-pack") }}, {{ cssxref("-moz-box-direction") }}

 

{{ languages( { "fr": "fr/CSS/-moz-box-flex", "pl": "pl/CSS/-moz-box-flex" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ warning("This is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.") }}</p>
<p>See <a href="/en/CSS/Flexbox" title="/en/CSS/Flexible_boxes">Flexbox</a> for more information.</p>
<h3 id="Summary" name="Summary">Summary</h3>
<p>The CSS <code>-moz-box-flex</code> and <code>-webkit-box-flex</code> properties specify how a <code>-moz-box</code> or <code>-webkit-box </code>grows to fill the box that contains it, in the direction of the containing box's layout. See <a href="/en/CSS/Flexbox" title="/en/CSS/Flexible_boxes">Flexbox</a> for more about the properties of flexbox elements.</p>
<ul> <li>{{ Xref_cssinitial() }}: 0</li> <li>Applies to: elements that are direct children of an element with a CSS {{ Cssxref("display") }} value of {{ Cssxref("-moz-box") }} or {{ Cssxref("-moz-inline-box") }} or {{ Cssxref("-webkit-box") }} or {{ Cssxref("-webkit-inline-box") }}</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3 id="Syntax" name="Syntax">Syntax</h3>
<pre class="eval">-moz-box-flex: <em>number</em>      /* Mozilla */
-webkit-box-flex: <em>number</em>   /* WebKit */
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl> <dt>0</dt> <dd>The box does not grow.</dd> <dt>&gt; 0</dt> <dd>The box grows to fill a proportion of the available space.</dd>
</dl>
<h3 id="Examples" name="Examples">Examples</h3>
<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;style&gt;
      div.example {
        display: -moz-box;
        display: -webkit-box;
        border: 1px solid black;
        width: 100%;                
      }
      div.example &gt; p:nth-child(1) {
        -moz-box-flex: 1;       /* Mozilla */
        -webkit-box-flex: 1;    /* WebKit */
        border: 1px solid black;      }
      div.example &gt; p:nth-child(2) {
        -moz-box-flex: 0;       /* Mozilla */
        -webkit-box-flex: 0;    /* WebKit */
        border: 1px solid black;
      }
    &lt;/style&gt;
    &lt;div class="example"&gt;
      &lt;p&gt;I will expand to fill extra space&lt;/p&gt;
      &lt;p&gt;I will not expand&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 id="Notes" name="Notes">Notes</h3>
<p>The containing box allocates the available extra space in proportion to the flex value of each of the content elements.</p>
<p>Content elements that have zero flex do not grow.</p>
<p>If only one content element has nonzero flex, then it grows to fill the available space.</p>
<p>Content elements that have the same flex grow by the same absolute amounts.</p>
<p>If the flex value is set using the element's <code>flex</code> attribute, then the style is ignored.</p>
<p>To make XUL elements in a containing box the same size, set the containing box's <code>equalsize</code> attribute to the value <code>always</code>. This attribute does not have a corresponding CSS property.</p>
<p>A trick to make all content elements in a containing box the same size, is to give them all a fixed size (e.g. <code>height: 0</code>), and the same box-flex value greater than zero (e.g. <code>-moz-box-flex: 1</code>).</p>
<h3 id="Specifications" name="Specifications">Specifications</h3>
<p>This property is a nonstandard extension.  There was an <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/" title="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">old draft of the CSS3 Flexbox specification</a> that defined a <code>box-flex</code> property, but that draft is over two years old and has since been superseded.</p>
<p>See also</p>
<p>{{ cssxref("-moz-box-orient") }}, {{ cssxref("-moz-box-pack") }}, {{ cssxref("-moz-box-direction") }}</p>
<p> </p>
<p>{{ languages( { "fr": "fr/CSS/-moz-box-flex", "pl": "pl/CSS/-moz-box-flex" } ) }}</p>
Revert to this revision