CSS flexible box

  • Revision slug: CSS/Flexbox
  • Revision title: Flexbox
  • Revision id: 292052
  • Created:
  • Creator: ericmdn
  • Is current revision? No
  • Comment 2 words added, 1 words removed

Revision Content

 

{{ SeeCompatTable() }}

The flexbox properties provide an improved way to lay out elements on a page.

Note: A current specification is being drafted in order to improve previous flexbox specification. Current browsers widely support the former implementation and it will remain supported. Both implementations use a different CSS prefix (box- and flex-) so both can be available in the browser. This article will overview both implementations.

box- implementation

Specification

flex- implementation

Specification

Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
box- implementation Supported Supported {{ CompatNo() }} {{ CompatNo() }} Supported
flex- implementation Supported {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
box- implementation Supported {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} Supported
flex- implementation {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

 

Revision Source

<p> </p>
<div> <p>{{ SeeCompatTable() }}</p> <p>The flexbox properties provide an improved way to lay out elements on a page.</p> <div class="note"><strong>Note:</strong> A <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">current specification</a> is being drafted in order to improve <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/" title="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">previous flexbox specification</a>. Current browsers widely support the former implementation and it will remain supported. Both implementations use a different CSS prefix (box- and flex-) so both can be available in the browser. This article will overview both implementations.</div> <h2>box- implementation</h2> <h3>Specification</h3> <ul> <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/" title="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/</a></li> </ul>
</div>
<div> <h2>flex- implementation</h2> <h3>Specification</h3> <ul> <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a></li> </ul> <h2>Compatibility</h2> <p>{{ CompatibilityTable() }}</p> <div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>box- implementation</td> <td>Supported</td> <td>Supported</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>Supported</td> </tr> <tr> <td>flex- implementation</td> <td>Supported</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody> </table> </div> <div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>box- implementation</td> <td>Supported</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>Supported</td> </tr> <tr> <td>flex- implementation</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody> </table> </div> <p> </p>
</div>
Revert to this revision