flex

  • Revision slug: CSS/flex
  • Revision title: flex
  • Revision id: 7432
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment 2 words added, 6 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 | [ <number>{1,2} || <'width'> ] 

flex: none        /* No flexibility given to the flexbox item*/
flex: 2 20em      /* Positive flexibility of two with a flex basis of 20em */
flex: 0 3 15em    /* No positive flexibility, negative flexibility of 3 and flex basis of 15em  */

Values

<number>
See {{ Xref_cssnumber() }} for more details. Negative values are considered invalid.
<'width'>
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

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;number&gt;{1,2} || &lt;'width'&gt; ] 
</nobr>
</pre>
<nobr> </nobr>
<pre>flex: <em>none        /* No flexibility given to the flexbox item*/
</em>flex: 2 20em      <em>/* Positive flexibility of two with a flex basis of 20em */
</em>flex: 0 3 15em<em>    /* No positive flexibility, negative flexibility of 3 and flex basis of 15em  */
</em>
</pre>
<h3><em>Values</em></h3>
<dl> <dt><code>&lt;number&gt;</code></dt> <dd>See {{ Xref_cssnumber() }} for more details. Negative values are considered invalid.</dd> <dt><code>&lt;'width'&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><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