Stupid simple flexbox for less.js

flexit.less

.flexIt(@type:flex) {
    display: ~"-webkit-@{type}";
    display: @type;
}


.flexDirection(@direction:row) {
    -webkit-flex-direction: @direction;
            flex-direction: @direction;
}


.flexWrap(@wrap:nowrap) {
    -webkit-flex-wrap: @wrap;
            flex-wrap: @wrap;
}


.flexJustify(@jusitfy:@flex-start) {
    -webkit-justify-content: @jusitfy;
            justify-content: @jusitfy;
}


.flexAlignItems(@align:flex-start) {
    -webkit-align-items: @align;
            align-items: @align;
}


.flexAlignContent(@align:flex-start) {
    -webkit-align-content: @align;
            align-content: @align;
}

// The following shorthands are only applicable for flexbox children elements.

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


.item(@order:0) {
    -webkit-order: @order;
            order: @order;
}


.itemGrow(@size:0) {
    -webkit-flex-grow: @size;
            flex-grow: @size;
}


.itemShrink(@shrink:1) {
    -webkit-flex-shrink: @shrink;
            flex-shrink: @shrink;
}


.itemBasis(@basis:auto) {
    -webkit-flex-basis: @basis;
            flex-basis: @basis;
}


.itemAlign(@align:flex-start) {
    -webkit-align-self: @align;
            align-self: @align;
}