I have been using the code mentioned below, it works on my Chrome but not on my IE9 and Safari.
I googled for the solution, despite I got various vendor prefixes, those results are baffling me.
<div style="display: flex; flex-direction: row;">
<div></div>
<div></div>
</div>
To cover all Flexbox implementations, your CSS would look like this:
.foo {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
Note, however, that specifying flex-direction: row is not necessary unless you're overriding a previous flex-direction declaration: row is the default direction. Also note that IE10 is the first version of IE to support Flexbox.
CSS Flexbox model is optimised for UI Design. It is developed primarily to avoid overflowing parent element. It will shrink children when ancestor element size is constricted. It will fill the space by expanding child element's size when ancestor element size extends. Flex container shrink and expand behaviour can break with min and max width / height property.
CSS FlexBox versions by version
W3 2009 : display: box;
box-align start | end | center | baseline | stretch
box-direction normal | reverse | inherit
box-flex <number> 0.0
box-flex-group <integer> 1
box-lines single | multiple
box-ordinal-group <integer> 1 visual
box-orient horizontal | vertical | inline-axis | block-axis | inherit inline-axis box elements no no visual
box-pack start | end | center | justify
W3 2011 : display flexbox | inline-flexbox
flex-align auto | baseline auto
flex-direction lr | rl | tb | bt | inline | inline-reverse | block | block-reverse flexboxes no lr | rl | tb | bt
flex-order <integer> 1
flex-pack start | end | center | justify
W3 2012 : display flex | inline-flex
align-content flex-start | flex-end | center | space-between | space-around | stretch
align-items flex-start | flex-end | center | baseline | stretch
align-self auto | flex-start | flex-end | center | baseline | stretch
flex-direction row | row-reverse | column | column-reverse
flex-flow <'flex-direction'> || <'flex-wrap'>
flex-grow <number> ‘0’
flex-shrink <number> ‘1’
flex-wrap nowrap | wrap | wrap-reverse
justify-content flex-start | flex-end | center | space-between | space-around
order <number> 0
My Flexbox css: I have tested on serveral devices from Android 2.3.3 and IOS and works ok:
.flex-container {
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; /* NEW, Spec - Opera 12.1, Firefox 20+ */
width: 100%;
}
.item {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
I would suggest reading the spec to fully understand: http://dev.w3.org/csswg/css-flexbox/
For the visually minded @chris-coyier has recently revamped his post w/ help from (@hugo-giraudel):http://css-tricks.com/snippets/css/a-guide-to-flexbox/
code sample:Live(credit to @chris-coyier just can't find original post so remade): http://cdpn.io/oDxnp
display: flex; =>
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row; =>
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
IE9-, unfortunately, doesn't support Flexbox at all. IE10 supports the 2011 version.
Opera 12.1+ supports the latest 2012 version unprefixed. It will also be supported by Chrome 30+ and IE11+. Firefox 22 already supports it, too, but only partially — it doesn't support flex-wrap property and flex-flow shorthand.
Previous versions of Firefox, Chrome, and Safari 3.1+ support 2009 version. Chrome 21+ also supports 2012 version with prefix.
