the flexbox equiv. for IE10

flex-for-ie-10-and-safari.css

/*  ====================  */
/*  container attributes  */
/*  ====================  */
  
  display:                  -ms-flexbox;
  display:                  -webkit-flex;
  display:                  flex;
  
  -ms-flex-direction:       row | column | row-reverse | column-reverse;
  -webkit-flex-direction:   row | column | row-reverse | column-reverse;
  flex-direction:           row | column | row-reverse | column-reverse;
  
  -ms-flex-align:           start | end | center | stretch | baseline;
  -webkit-align-items:      flex-start | flex-end | center | stretch | baseline;
  align-items:              flex-start | flex-end | center | stretch | baseline;
  
  -ms-flex-line-pack:       start | end | center | distribute | justify | stretch;
  -webkit-align-content:    flex-start | flex-end | center | space-around | space-between | stretch;
  align-content:            flex-start | flex-end | center | space-around | space-between | stretch;
    
  -ms-flex-pack:            start | end | center | distribute | justify;
  -webkit-justify-content:  flex-start | flex-end | center | space-around | space-between;
  justify-content:          flex-start | flex-end | center | space-around | space-between;
 
  -ms-flex-wrap:            none | wrap;
  -webkit-flex-wrap:        nowrap | wrap | wrap-reverse
  flex-wrap:                nowrap | wrap | wrap-reverse

/*  ================  */
/*  child attributes  */
/*  ================  */
  
  -ms-flex-positive:        0;
  -webkit-flex-grow:        0;
  flex-grow:                0;
 
  -ms-flex-negative:        1;
  -webkit-flex-shrink:      1;
  flex-shrink:              1;
  
  -ms-flex-preferred-size:  auto;
  -webkit-flex-basis:       auto;
  flex-basis:               auto;
  
  /*  use shorthand whenever possible since ie10 uses different defaults  */
  
  -ms-flex:                 0 1 auto;
  -webkit-flex:             0 1 auto;
  flex:                     0 1 auto;

  -ms-flex-item-align:      start | end | center | stretch | baseline;
  -webkit-align-self:       flex-start | flex-end | center | stretch | baseline;
  align-self:               flex-start | flex-end | center | stretch | baseline;

  -ms-flex-order:           1 | 2 | 3;
  -webkit-flex-order:       1 | 2 | 3;
  flex-order:               1 | 2 | 3;