mozilla

Revision 7429 of flex

  • Revision slug: CSS/flex
  • Revision title: flex
  • Revision id: 7429
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment one or more formatting changes

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable() }}

Summary

The flex CSS property specifies ability of a flexbox item to alter their dimensions to fill the available space. Flexbox items can be stretched to use available space proportional to their positive flexibility or shrink them proportional to their negative flexibility to prevent overflow.

<style type="text/css"></style>
  • {{ Xref_cssinitial() }}: none
  • Applies to: flexbox items
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: two integers for positive and negative flex, and a preferred size given as an absolute length or a keyword.

Syntax

Formal grammar: [[ <pos-flex> <neg-flex>? ] || <preferred-size> ] | none 

flex: value

Values

<pos-flex>
Defines the ability of the flexbox item to stretch. If omitted, <pos-flex> defaults to 1. Only non-negative values are valid.
<neg-flex>
Optional value. Defines the ability of the flexbox item to shrink to avoid overflow. If omitted, it defaults to 0. Only non-negative values are valid.
<preferred-size>
Defines the preferred size of the flexbox item. Any value valid for width and height properties except the inherit value are accepted. A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0
none
This keyword computes to 0 0 auto

Examples

Specifications

Specification Status Comment
CSS Flexible Box Layout Module {{ Spec2('CSS3 Flexbox') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2>Summary</h2>
<p>The <code>flex</code> <a href="/en/CSS" title="CSS">CSS</a> property specifies ability of a flexbox item to alter their dimensions to fill the available space. Flexbox items can be stretched to use available space proportional to their positive flexibility or shrink them proportional to their negative flexibility to prevent overflow.<nobr> </nobr></p>
<nobr>
<style type="text/css"><![CDATA[.cssprop {
  display:table;
  padding: 0.4em;
  border-left:0.15em solid;
  background-color:#eeeeff
}
.cssprop li {
 display:table-row;
 padding: 3px;
 margin:0;
}
.cssprop li dfn {
  display:table-cell;
  padding: 0 5px;
  border-bottom: none;
  cursor:inherit;
}

]]></style>
<ul class="cssprop"> <li><dfn>{{ Xref_cssinitial() }}:</dfn> none</li> <li><dfn>Applies to:</dfn> flexbox items</li> <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li> <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li> <li><dfn>{{ Xref_csscomputed() }}:</dfn> two integers for positive and negative flex, and a preferred size given as an absolute length or a keyword.</li> </ul></nobr><h2>Syntax</h2>
<pre class="twopartsyntaxbox"><nobr>Formal grammar: [[ &lt;pos-flex&gt; &lt;neg-flex&gt;? ] || &lt;preferred-size&gt; ] | none 
</nobr>
</pre>
<nobr> </nobr>
<pre><nobr>flex: <em>value</em>
</nobr>
</pre>
<h3>Values</h3>
<dl> <dt><code>&lt;pos-flex&gt;</code></dt> <dd>Defines the ability of the flexbox item to stretch. If omitted, &lt;pos-flex&gt; defaults to <code>1</code>. Only non-negative values are valid.</dd> <dt><code>&lt;neg-flex&gt;</code></dt> <dd>Optional value. Defines the ability of the flexbox item to shrink to avoid overflow. If omitted, it defaults to <code>0</code>. Only non-negative values are valid.</dd> <dt><code>&lt;preferred-size&gt;</code></dt> <dd>Defines the preferred size of the flexbox item. Any value valid for <code>width</code> and <code>height</code> properties except the <code>inherit</code> value are accepted. A preferred size of <code>0</code> must have a unit to avoid being interpreted as a flexibility. Defaults to <code>0</code></dd> <dt><code>none</code></dt> <dd>This keyword computes to <code>0 0 auto</code></dd>
</dl>
<h2>Examples</h2>
<h2 name="Specifications">Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://dev.w3.org/csswg/css3-flexbox/#flex" title="http://dev.w3.org/csswg/css3-flexbox/#flex">CSS Flexible Box Layout Module</a></td> <td>{{ Spec2('CSS3 Flexbox') }}</td> <td> </td> </tr> </tbody>
</table>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Firefox (Gecko)</th> <th>Chrome</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Firefox Mobile (Gecko)</th> <th>Android</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2>See also</h2>
<p><code><nobr></nobr></code></p>
Revert to this revision