A simple collection of mixins for Less in order to use FlexBox layout effortlessly among different modern browsers.I won't support any old browser, as they can be upgraded for free and Chrome/Firefox are free and available for every device.thanks to http://the-echoplex.net/flexyboxes/ for the help

Flexbox Mixins

/* FLEX CONTAINER */
.display-flex() {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
}

.flex-direction-row {
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flex-direction-row-reverse {
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizonal;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.flex-direction-col-reverse {
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.flex-direction-col {
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-wrap (@how) {
  -webkit-flex-wrap: @how;
  -ms-flex-wrap: @how;
  flex-wrap: @how;
}

.justify-content-to-left {
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.justify-content-to-right {
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.justify-content-center {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-justify-content: flex-center;
  -ms-flex-pack: center;
  justify-content: center;
}

.justify-content-space-between() {
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.justify-content-space-around() {
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.align-items-to-top() {
  -webkit-box-align: start;
  -moz-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.align-items-to-bottom() {
  -webkit-box-align: end;
  -moz-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.align-items-baseline() {
  -webkit-box-align: baseline;
  -moz-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

.align-items-stretch() {
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.align-items-center() {
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.align-content-to-top() {
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

.align-content-to-bottom() {
  -webkit-align-content: flex-end;
  -ms-flex-line-pack: end;
  align-content: flex-end;
}

.align-content-space-around() {
  -webkit-align-content: space-around;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
}

.align-content-space-between() {
  -webkit-align-content: space-between;
  -ms-flex-line-pack: justify;
  align-content: space-between;
}

.align-content-stretch() {
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
}

.flex-item-order (@n) {
  webkit-box-ordinal-group: @n;
  -moz-box-ordinal-group: @n;
  -webkit-order: @n;
  -ms-flex-order: @n;
  order: @n;
}

.flex (@grow: 0 , @shrink: 1 , @basis: auto) {
  -webkit-box-flex: @grow;
  -moz-box-flex: @grow;
  -webkit-flex: @grow @shrink @basis;
  -ms-flex: @grow @basis @basis;
  flex: @grow @shrink @basis;
}

.align-self (@how: auto) {
  -webkit-align-self: @how;
  -ms-flex-item-align: @how;
  align-self: @how;
}

.center-all {
  .justify-content-center ();
  .align-items-center ();
}