StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There is a fantastic resource by Chris Coyier at:</p> <p><a href="http://css-tricks.com/using-flexbox/">http://css-tricks.com/using-flexbox/</a></p> <p>The problem is there are three drafts in use for flexbox. Chris Coyier's article goes over all three versions and how to interleave them for cross-browser support. I have excerpted the relevant bits below.</p> <p>For <code>display:flex</code>:</p> <pre><code>display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; </code></pre> <p>For <code>flex:1</code>:</p> <pre><code>-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ width: 20%; /* For old syntax, otherwise collapses. */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ </code></pre> <p>For <code>order:1</code>:</p> <pre><code>-webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; </code></pre> <p>He claims support for:</p> <ul> <li>Chrome any</li> <li>Firefox any</li> <li>Safari any</li> <li>Opera 12.1+</li> <li>IE 10+</li> <li>iOS any</li> <li>Android any</li> </ul> <p>I think the rest of the flexbox properties have not undergone revisions, so you can just use the "standard" set of prefixes (<code>-ms</code>, <code>-moz</code>, <code>-webkit</code>, unprefixed).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload