flex

  • Revision slug: Web/CSS/flex
  • Revision title: flex
  • Revision id: 474367
  • Created:
  • Creator: JDBurnZ
  • Is current revision? No
  • Comment Added single code example as a starting point.

Revision Content

{{CSSRef("CSS Flexible Boxes")}}

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.

{{cssbox("flex")}}

See Using CSS flexible boxes for more properties and information.

Syntax

Formal syntax: {{csssyntax("flex")}}
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 */

flex: inherit

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

<style type="text/css">
  #flex-container {
    width:100%;

    /* flexbox specific properties */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  #flex-container .flex-item {
    border:1px solid #f00;

    /* flexbox specific properties */
    -webkit-flex: auto;
    flex: auto;
  }
</style>

<div id="flex-container">
  <div class="flex-item">Flex Box 1</div>
  <div class="flex-item">Flex Box 2</div>
</div>

{{todo}}: Improve on these 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 {{CompatGeckoDesktop("18.0")}} (behind a pref) [1]
{{CompatGeckoDesktop("20.0")}}
21.0{{property_prefix("-webkit")}} 10.0{{property_prefix("-ms")}}
11.0
12.10 {{CompatNo()}}
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown()}} {{CompatUnknown()}} {{CompatNo()}} 12.10 {{CompatNo()}}

[1] Firefox supports only single-line flexbox. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true.

See also

Revision Source

<div>
  {{CSSRef("CSS Flexible Boxes")}}</div>
<h2 class="Syntaxbox" id="Summary">Summary</h2>
<p>The <code>flex</code> <a href="/en-US/docs/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>
<p>{{cssbox("flex")}}</p>
<p>See <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> for more properties and information.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("flex")}}
</pre>
<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>

flex: inherit</pre>
<h3 id="Values" name="Values">Values</h3>
<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-US/docs/CSS/flex-basis" title="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" name="Examples">Examples</h2>
<pre class="brush: html">
&lt;style type="text/css"&gt;
  #flex-container {
    width:100%;

    /* flexbox specific properties */
    <code class="language-html"><span class="token style"><span class="token property">display</span><span class="token punctuation">:</span> -webkit-flex<span class="token punctuation">;</span></span></code><code class="language-html"><span class="token style">
</span></code><code class="language-html"><span class="token style">    </span></code><code class="language-html"><span class="token style"><span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span></span></code>
<code class="language-html"><span class="token style">    </span></code><code class="language-html"><span class="token style"><span class="token property">-webkit-flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span></span></code><code class="language-html"><span class="token style">
</span></code><code class="language-html"><span class="token style">    </span></code><code class="language-html"><span class="token style"><span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span></span></code>
  }
  #flex-container .flex-item {
    border:1px solid #f00;

    /* flexbox specific properties */
<code class="language-html"><span class="token style">    <span class="token property">-webkit-flex</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
    <span class="token property">flex</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span></span></code>
  }
&lt;/style&gt;

&lt;div id="flex-container"&gt;
  &lt;div class="flex-item"&gt;Flex Box 1&lt;/div&gt;
  &lt;div class="flex-item"&gt;Flex Box 2&lt;/div&gt;
&lt;/div&gt;

{{todo}}: Improve on these examples.
</pre>
<h2 id="Specifications" name="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>{{CompatGeckoDesktop("18.0")}} (behind a pref) [1]<br />
          {{CompatGeckoDesktop("20.0")}}</td>
        <td>21.0{{property_prefix("-webkit")}}</td>
        <td>10.0{{property_prefix("-ms")}}<br />
          11.0</td>
        <td>12.10</td>
        <td>{{CompatNo()}}</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>{{CompatNo()}}</td>
        <td>12.10</td>
        <td>{{CompatNo()}}</td>
      </tr>
    </tbody>
  </table>
</div>
<p name="See_also">[1] Firefox supports only single-line flexbox. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to <code>true</code>.</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
  <li>{{CSS_Reference:FlexBox()}}</li>
</ul>
Revert to this revision