A LESS port of Bourbon's flexbox mixins, which include support for the 2009 and 2011 spec of flexbox

_flexbox.less

// Ported from Bourbon's Flexbox mixins: https://github.com/thoughtbot/bourbon

.display-box {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox; // IE 10
    display: box;
}

// Custom shorthand notation for flexbox
.box(@orient: inline-axis, @pack: start, @align: stretch) {
    .display-box;
    .box-orient(@orient);
    .box-pack(@pack);
    .box-align(@align);
}

.box-orient(@orient: inline-axis) {
    // horizontal|vertical|inline-axis|block-axis|inherit
    .prefixer(box-orient, @orient, webkit moz spec);
}

.box-pack(@pack: start) {
    // start|end|center|justify
    .prefixer(box-pack, @pack, webkit moz spec);
    -ms-flex-pack: @pack; // IE 10
}

.box-align(@align: stretch) {
    // start|end|center|baseline|stretch
    .prefixer(box-align, @align, webkit moz spec);
    -ms-flex-align: @align; // IE 10
}

.box-direction(@direction: normal) {
    // normal|reverse|inherit
    .prefixer(box-direction, @direction, webkit moz spec);
    -ms-flex-direction: @direction; // IE 10
}

.box-lines(@lines: single) {
    // single|multiple
    .prefixer(box-lines, @lines, webkit moz spec);
    }

.box-ordinal-group(@int: 1) {
    .prefixer(box-ordinal-group, @int, webkit moz spec);
    -ms-flex-order: @int; // IE 10
}

.box-flex(@value: 0) {
    .prefixer(box-flex, @value, webkit moz spec);
    -ms-flex: @value; // IE 10
}

.box-flex-group(@int: 1) {
    .prefixer(box-flex-group, @int, webkit moz spec);
}

// CSS3 Flexible Box Model and property defaults
// Unified attributes for 2009, 2011, and 2012 flavours.

// 2009 - display (box | inline-box)
// 2011 - display (flexbox | inline-flexbox)
// 2012 - display (flex | inline-flex)
.display(@value) {

    // flex | inline-flex
    & when (@value = flex) {
        // 2009
        display: -webkit-box;
        display: -moz-box;
        display: box;

        // 2012
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox; // 2011 (IE 10)
        display: flex;
    }
    & when (@value = inline-flex) {
        display: -webkit-inline-box;
        display: -moz-inline-box;
        display: inline-box;

        display: -webkit-inline-flex;
        display: -moz-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
    }
}

// 2009 - box-flex (integer)
// 2011 - flex (decimal | width decimal)
// 2012 - flex (integer integer width)
.flex(@value) {

    // Grab flex-grow for older browsers.
    @flex-grow: nth(@value, 1);

    // 2009
    .prefixer(box-flex, @flex-grow, webkit moz spec);

    // 2011 (IE 10), 2012
    .prefixer(flex, @value, webkit moz ms spec);
}

.flex-direction-prefixer(@value-old; @direction; @value) {
    // 2009
    .prefixer(box-orient, @value-old, webkit moz spec);
    
    & when (@direction = reverse) {
        .prefixer(box-direction, @direction, webkit moz spec);
    }

    // 2012
    .prefixer(flex-direction, @value, webkit moz spec);

    // 2011 (IE 10)
    -ms-flex-direction: @value;
}

// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
//      - box-direction (normal | reverse)
// 2011 - flex-direction (row | row-reverse | column | column-reverse)
// 2012 - flex-direction (row | row-reverse | column | column-reverse)
.flex-direction(@value: row) {
    & when (@value = row) {
        .flex-direction-prefixer(horizontal, normal, @value);
    }
    & when (@value = row-reverse) {
        .flex-direction-prefixer(horizontal, reverse, @value);
    }
    & when (@value = column) {
        .flex-direction-prefixer(vertical, normal, @value);
    }
    & when (@value = column-reverse) {
        .flex-direction-prefixer(vertical, reverse, @value);
    }
}

.flex-wrap-prefixer(@value-old; @value) {
    .prefixer(box-lines, @value-old, webkit moz spec);
    .prefixer(flex-wrap, @value, webkit moz ms spec);
}

// 2009 - box-lines (single | multiple)
// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
.flex-wrap(@value: nowrap) {
    // Alt values
    @alt-value: @value;

    & when (@value = nowrap) {
        .flex-wrap-prefixer(single, @value);
    }
    & when (@value = wrap) {
        .flex-wrap-prefixer(multiple, @value);
    }
    & when (@value = wrap-reverse) {
        .flex-wrap-prefixer(multiple, @value);
    }
}

// 2009 - TODO: parse values into flex-direction/flex-wrap
// 2011 - TODO: parse values into flex-direction/flex-wrap
// 2012 - flex-flow (flex-direction || flex-wrap)
.flex-flow(@value) {
  .prefixer(flex-flow, @value, webkit moz spec);
}

// 2009 - box-ordinal-group (integer)
// 2011 - flex-order (integer)
// 2012 - order (integer)
.order(@int: 0) {
  // 2009
  .prefixer(box-ordinal-group, @int, webkit moz spec);

  // 2012
  .prefixer(order, @int, webkit moz spec);

  // 2011 (IE 10)
  -ms-flex-order: @int;
}

// 2012 - flex-grow (number)
.flex-grow(@number: 0) {
  .prefixer(flex-grow, @number, webkit moz spec);
  -ms-flex-positive: @number;
}

// 2012 - flex-shrink (number)
.flex-shrink(@number: 1) {
  .prefixer(flex-shrink, @number, webkit moz spec);
  -ms-flex-negative: @number;
}

// 2012 - flex-basis (number)
.flex-basis(@width: auto) {
  .prefixer(flex-basis, @width, webkit moz spec);
  -ms-flex-preferred-size: @width;
}

.justify-content-prefixer(@value-old; @value) {
    // 2009
    .prefixer(box-pack, @value-old, webkit moz spec);

    // 2012
    .prefixer(justify-content, @value, webkit moz ms o spec);

    // 2011 (IE 10)
    -ms-flex-pack: @value-old;;
}

// 2009 - box-pack (start | end | center | justify)
// 2011 - flex-pack (start | end | center | justify)
// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
.justify-content(@value: flex-start) {
    & when (@value = flex-start) {
        .justify-content-prefixer(start, @value);
    }
    & when (@value = flex-end) {
        .justify-content-prefixer(end, @value);
    }
    & when (@value = space-between) {
        .justify-content-prefixer(justify, @value);
    }
    & when (@value = space-around) {
        .justify-content-prefixer(distribute, @value);
    }
}

.align-items-prefixer(@value-old; @value) {
    // 2009
    .prefixer(box-align, @value-old, webkit moz spec);

    // 2012
    .prefixer(align-items, @value, webkit moz ms o spec);

    // 2011 (IE 10)
    -ms-flex-align: @value-old;
}

// 2009 - box-align (start | end | center | baseline | stretch)
// 2011 - flex-align (start | end | center | baseline | stretch)
// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
.align-items(@value: stretch) {
    & when (@value = flex-start) {
        .align-items-prefixer(start, @value);
    }
    & when (@value = flex-end) {
        .align-items-prefixer(end, @value);
    }
}

.align-self-prefixer(@value-old; @value) {
    // 2012
    .prefixer(align-self, @value, webkit moz spec);

    // 2011 (IE 10)
    -ms-flex-item-align: @value-old;
}

// 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
.align-self(@value: auto) {
    & when (@value = flex-start) {
        .align-self-prefixer(start, @value);
    }
    & when (@value = flex-end) {
        .align-self-prefixer(end, @value);
    }
}

.align-content-prefixer(@value-old; @value) {
    // 2012
    .prefixer(align-content, @value, webkit moz spec);

    // 2011 (IE 10)
    -ms-flex-line-pack: @value-old;
}

// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
.align-content(@value: stretch) {
    & when (@value = flex-start) {
        .align-content-prefixer(start; @value);
    }
    & when (@value = flex-end) {
        .align-content-prefixer(end; @value);
    }
    & when (@value = space-between) {
        .align-content-prefixer(justify; @value);
    }
    & when (@value = space-around) {
        .align-content-prefixer(distribute; @value);
    }
}

_prefixer.less

.prefixer(@property; @value; @prefixes...) {
    .loop(length(@prefixes));
    .loop(@i) when (@i > 0) {
        .loop((@i - 1));
    
        @prefix: extract(@prefixes, @i);
    
        & when (@prefix = spec) {
            @{property}: @value;
        }
        
        & when not (@prefix = spec) {
            -@{prefix}-@{property}: @value;
        }    
    }
}