flexbox-helpers.less

.display-box() {
    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;
    display: box;
}

.box-direction(@value) {
    -webkit-flex-direction: @value;
    -moz-flex-direction: @value;
    -ms-flex-direction: @value;
    flex-direction: @value;
}

.direction-row(){
    .box-direction(row);
    -webkit-box-orient: horizontal;
}

.direction-column(){
    .box-direction(column);
    -webkit-box-orient: vertical;
}

.box-wrap(@value:wrap) {
    -webkit-flex-wrap: @value;
    -moz-flex-wrap: @value;
    -ms-flex-wrap: @value;
    flex-wrap: @value;
}

.box-align(@value) {
    -webkit-box-align: @value;
    -moz-box-align: @value;
    -ms-flex-align: @value;
    box-align: @value;
}

.box-pack(@value) {
    -webkit-box-pack: @value;
    -moz-box-pack: @value;
    -ms-flex-pack: @value;
    box-pack: @value;
}

.box-flex(@positive: 0, @negative: 0, @preferred: auto ) {
    -webkit-flex: @positive @negative @preferred;
    -moz-box-flex: @positive;
    -ms-flex: @positive @negative @preferred;
    flex: @positive @negative @preferred;
    box-flex: @positive;
}


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

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

.align-end() {
    .box-align(end);
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

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

.center-content() {
    .box-pack(center);
    -webkit-justify-content: center;
    justify-content: center;
}

.end-content() {
    .box-pack(end);
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.start-content() {
    .box-pack(start);
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}