Cross Browser support for CSS Flexbox

Question

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, th

Answer 1

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                    0.0
box-flex-group             1
box-lines                single | multiple
box-ordinal-group          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         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           ‘0’ 
flex-shrink         ‘1’
flex-wrap        nowrap | wrap | wrap-reverse
justify-content  flex-start | flex-end | center | space-between | space-around
order               0