flex

  • Revision slug: CSS/flex
  • Revision title: flex
  • Revision id: 303511
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment http://dvcs.w3.org/hg/csswg/diff/e568e3f54ab7/css3-flexbox/Overview.html Change ALL the names

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable() }}

Summary

The flex CSS property specifies ability of a flex item to alter their dimensions to fill the available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow.

  • {{ Xref_cssinitial() }} See individual properties
  • Applies to flex items
  • {{ Xref_cssinherited() }} no
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}See individual properties

See Using CSS flexible boxes for more properties and information.

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 flex item. Any value valid for width and height properties 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.
auto
This keyword is equivalent to 1 1 auto.
initial
This keyword is equivalent to 0 1 auto.
Note: The default value of <'flex-basis'> in the 'flex' shorthand is different from the initial value of the flex-basis property.
Note: The <'flex-grow'> and <'flex-shrink'> properties are set to '1' if omitted.

Examples

Specifications

Specification Status Comment
{{ SpecName('CSS3 Flexbox', '#flex', 'flex') }} {{ Spec2('CSS3 Flexbox') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatUnknown() }} 21.0{{ property_prefix("-webkit") }} {{ 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 id="Summary">Summary</h2>
<p>The <code>flex</code> <a href="/en/CSS" title="CSS">CSS</a> property specifies ability of a flex item to alter their dimensions to fill the available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> See individual properties</li>
  <li><dfn>Applies to</dfn> flex items</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn>See individual properties</li>
</ul>
<p>See&nbsp;<a href="/en/CSS/Using_CSS_flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a>&nbsp;for more properties and information.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
Formal grammar: none | [ &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt;? || &lt;'flex-basis'&gt; ] 
</pre>
<pre>
flex: none &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                     <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; &nbsp; &nbsp;&nbsp;               <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; &nbsp;&nbsp; <em>/* Three values syntax */
</em>
</pre>
<h4 id="Values">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 flex item. Any value valid for <code>width</code> and <code>height</code> properties 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>
  <dt>
    <code>auto</code></dt>
  <dd>
    This keyword is equivalent to <code>1 1 auto</code>.</dd>
  <dt>
    <code>initial</code></dt>
  <dd>
    This keyword is equivalent to <code>0 1 auto</code>.</dd>
</dl>
<div class="note">
  Note: The default value of <code>&lt;'flex-basis'&gt;</code> in the <code>'flex'</code> shorthand is different from the initial value of the <a href="/en/CSS/flex-basis" title="en/CSS/flex-basis"><code>flex-basis</code></a> property.</div>
<div class="note">
  Note: The <code>&lt;'flex-grow'&gt;</code> and <code>&lt;'flex-shrink'&gt;</code> properties are set to <code>'1'</code> if omitted.</div>
<h2 id="Examples">Examples</h2>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th>Specification</th>
      <th>Status</th>
      <th>Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Flexbox', '#flex', 'flex') }}</td>
      <td>{{ Spec2('CSS3 Flexbox') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">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>21.0{{ property_prefix("-webkit") }}</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&nbsp;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 id="See_also">See also</h2>
Revert to this revision