Flexbox LESS Mixin

Flexbox Less Mixin

.flexit( @flex-dir ) {
	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+ */
	 -webkit-box-direction: normal;
	-webkit-flex-direction: @flex-dir;
	   -moz-flex-direction: @flex-dir;
		  -ms-flex-direction: @flex-dir;
		   -o-flex-direction: @flex-dir;	
		      flex-direction: @flex-dir;
}

.box-order( @box-order-number: 1 ) {
	-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;
	-webkit-box-ordinal-group: @box-order-number;	/* OLD - iOS 6-, Safari 3.1-6 */
	   -moz-box-ordinal-group: @box-order-number;	/* OLD - Firefox 19- */
		   -ms-flex-order: @box-order-number;	/* TWEENER - IE 10 */
		    -webkit-order: @box-order-number;	/* NEW - Chrome */
			    order: @box-order-number;
}

// how to use
.flex {
  .flexit(column);
  div.one { .box-order(2); }
  div.two { .box-order(1); }
}