CSS flexible box

  • Revision slug: CSS/Flexbox
  • Revision title: Flexbox
  • Revision id: 292047
  • Created:
  • Creator: ernestd
  • Is current revision? No
  • Comment 135 words added

Revision Content

 

{{ SeeCompatTable() }}

The flexbox properties provide an improved way to layout 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

 

Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Supported Supported {{ CompatNo() }} {{ CompatNo() }} Supported
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Supported {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} Supported

 

flex- implementation

Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

 

Revision Source

<p> </p>
<div> <p>{{ SeeCompatTable() }}</p> <p>The flexbox properties provide an improved way to layout 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> <p> </p> <h3>Compatibility</h3> <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>Basic support</td> <td>Supported</td> <td>Supported</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>Supported</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>Basic support</td> <td>Supported</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>Supported</td> </tr> </tbody> </table> </div> <p> </p>
</div>
<div> <h2>flex- implementation</h2> <h3>Compatibility</h3> <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>Basic support</td> <td>{{ CompatNo() }}</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>Basic support</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