mozilla

Revision 7433 of flex

  • Revision slug: CSS/flex
  • Revision title: flex
  • Revision id: 7433
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment 153 words added, 41 words removed

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 numbers for positive and negative flex, and a flex basis given as an absolute length or a keyword

Syntax

Formal grammar: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 

flex: none                                            /* value 'none' case */
flex: <'flex-grow'>                                   /* One value syntax, variation 1 */
flex: <'flex-basis'>                                  /* One value syntax, variation 2 */
flex: <'flex-grow'> <'flex-basis'>                    /* Two values syntax, variation 1 */
flex: <'flex-grow'> <'flex-shrink'>                   /* Two values syntax, variation 2 */
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>    /* Three values syntax */

Values

<'flex-grow'>
See {{ Xref_cssnumber() }} for more details. Negative values are considered invalid.
<'flex-shrink'>
See {{ Xref_cssnumber() }} for more details. Negative values are considered invalid. This value is optional.
<'flex-basis'>
Defines the flex basis 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 0px.
none
This keyword computes to 0 0 auto
Note: <'flex-basis'> default value is different from the default value of the flex-basis property.

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 numbers for positive and negative flex, and a flex basis given as an absolute length or a keyword</li>
</ul>
</nobr>
<h2>Syntax</h2>
<pre class="twopartsyntaxbox"><nobr>Formal grammar: none | [ &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt;? || &lt;'flex-basis'&gt; ] 
</nobr>
</pre>
<nobr> </nobr>
<pre>flex: none                                            <em>/* value 'none' case */
</em>flex: &lt;'flex-grow'&gt;<em>                                   /* One value syntax, variation 1 */
</em>flex: &lt;'flex-basis'&gt;                                  <em>/* One value syntax, variation 2 */
</em>flex: &lt;'flex-grow'&gt; &lt;'flex-basis'&gt;                    <em>/* Two values syntax, variation 1 */
</em>flex: &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt;                   <em>/* Two values syntax, variation 2 */
</em>flex: &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt; &lt;'flex-basis'&gt;    <em>/* Three values syntax */
</em>
</pre>
<h4>Values</h4>
<dl> <dt><code>&lt;'flex-grow'&gt;</code></dt> <dd>See {{ Xref_cssnumber() }} for more details. Negative values are considered invalid.</dd> <dt><code>&lt;'flex-shrink'&gt;</code></dt> <dd>See {{ Xref_cssnumber() }} for more details. Negative values are considered invalid. This value is optional.</dd> <dt><code>&lt;'flex-basis'&gt;</code></dt> <dd>Defines the flex basis 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>0px</code>.</dd> <dt><code>none</code></dt> <dd>This keyword computes to <code>0 0 auto</code></dd>
</dl>
<div class="note">Note: <code>&lt;'flex-basis'&gt;</code> default value is different from the default value of the <a href="/en/CSS/flex-basis" title="en/CSS/flex-basis"><code>flex-basis</code></a> property.</div>
<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