flexbox.less

// FlexLess
// ========
//
// Less mixins for using flexbox without crying.
//
// Last update: 02.08.2013




// Enabeling Flexbox
// -----------------
//
// Property Name: display
// Values: flex | inline-flex
.display(@value: flex) when (@value = flex) {
    // display: -moz-box;              // Mozilla Old
    display: -webkit-box;           // Webkit Old
}

.display(@value: flex) when (@value = inline-flex) {
    // display: -moz-inline-box;       // Mozilla Old
    display: -webkit-inline-box;    // Webkit Old
}

.display(@value: flex) {
    display: ~"-webkit-@{value}";  // Webkit Standard
    // display: ~"-moz-@{value}";     // Mozilla Standard
    // display: ~"-ms-@{value}box";   // IE 10 Mid
    // display: ~"-ms-@{value}";      // IE 11 Standard
    display: @value;               // Standard
}


// Axis Alignment
// --------------
//
// Property Name: justify-content
// Values: flex-start | flex-end | center | space-between | space-around
.justify-content(@value: flex-start) when (@value = flex-start) {
    -webkit-box-pack: start;          // Webkit Old
       // -moz-box-pack: start;          // Mozilla Old
       // -ms-flex-pack: start;          // IE 10 Mid
}

.justify-content(@value: flex-start) when (@value = center) {
    -webkit-box-pack: center;         // Webkit Old
       // -moz-box-pack: center;         // Mozilla Old
       // -ms-flex-pack: center;         // IE 10 Mid

}

.justify-content(@value: flex-start) when (@value = flex-end) {
    -webkit-box-pack: end;            // Webkit Old
       // -moz-box-pack: end;            // Mozilla Old
       // -ms-flex-pack: end;            // IE 10 Mid
}

.justify-content(@value: flex-start) when (@value = space-between) {
    -webkit-box-pack: justify;        // Webkit Old
       // -moz-box-pack: justify;        // Mozilla Old
       // -ms-flex-pack: justify;        // IE 10 Mid
}

.justify-content(@value: flex-start) when (@value = space-around) {
       -ms-flex-pack: distribute;     // IE 10 Mid
}

.justify-content(@value: flex-start) {
    -webkit-justify-content: @value;  // Webkit Standard
       // -moz-justify-content: @value;  // Mozilla Standard
        // -ms-justify-content: @value;  // IE 11 Standard
            justify-content: @value;  // Standard
}

// Cross Axis Alignment
// --------------------
//
// Property Name: align-items
// Values: flex-start | flex-end | center | baseline | stretch
.align-items(@value: stretch) when (@value = flex-start) {
    -webkit-box-align: start;          // Webkit Old
       // -moz-box-align: start;          // Mozilla Old
       // -ms-flex-align: start;          // IE 10 Mid
}

.align-items(@value: stretch) when (@value = center), (@value = baseline), (@value = stretch) {
    -webkit-box-align: @value;         // Webkit Old
       // -moz-box-align: @value;         // Mozilla Old
       // -ms-flex-align: @value;         // IE 10 Mid

}

.align-items(@value: stretch) when (@value = flex-end) {
    -webkit-box-align: end;            // Webkit Old
       // -moz-box-align: end;            // Mozilla Old
       // -ms-flex-align: end;            // IE 10 Mid
}

.align-items(@value: stretch) {
    -webkit-align-items: @value;  // Webkit Standard
       // -moz-align-items: @value;  // Mozilla Standard
        // -ms-align-items: @value;  // IE 11 Standard
            align-items: @value;  // Standard
}



// Individual Cross-Axis Alignment
// -------------------------------
//
// Property Name: align-self
// Values: auto | flex-start | flex-end | center | baseline | stretch
.align-self(@value: auto) when (@value = flex-start) {
       -ms-flex-item-align: start;       // IE 10 Mid
}

.align-self(@value: auto) when (@value = auto), (@value = center), (@value = baseline), (@value = stretch) {
       -ms-flex-item-align: @value;      // IE 10 Mid
}

.align-self(@value: auto) when (@value = flex-end) {
       -ms-flex-item-align: end;         // IE 10 Mid
}

.align-self(@value: auto) {
    -webkit-align-self: @value;          // Webkit Standard
       // -moz-align-self: @value;          // Mozilla Standard
        // -ms-align-self: @value;          // IE 11 Standard
            align-self: @value;          // Standard
}


// Flex Line Alignment
// -------------------
//
// Property Name: align-content
// Values: flex-start | flex-end | center | space-between | space-around | stretch
.align-content(@value: auto) when (@value = flex-start) {
       -ms-flex-line-pack: start;        // IE 10 Mid
}

.align-content(@value: auto) when (@value = center), (@value = stretch) {
       -ms-flex-line-pack: @value;       // IE 10 Mid
}

.align-content(@value: auto) when (@value = flex-end) {
       -ms-flex-line-pack: end;          // IE 10 Mid
}

.align-content(@value: auto) when (@value = space-between) {
       -ms-flex-line-pack: justify;      // IE 10 Mid
}

.align-content(@value: auto) when (@value = space-around) {
       -ms-flex-line-pack: distribute;   // IE 10 Mid
}

.align-content(@value: auto) {
    -webkit-align-content: @value;       // Webkit Standard
       // -moz-align-content: @value;       // Mozilla Standard
        // -ms-align-content: @value;       // IE 11 Standard
            align-content: @value;       // Standard
}



// Display Order
// -------------
//
// Property Name: order
// Values: <integer>
.order(@value: 0) {
   -webkit-box-ordinal-group: @value + 1;   // Webkit Old
      // -moz-box-ordinal-group: @value + 1;   // Mozilla Old
              // -ms-flex-order: @value;       // IE 10 Mid
               -webkit-order: @value;       // Webkit Standard
                  // -moz-order: @value;       // Mozilla Standard
                   // -ms-order: @value;       // IE 11 Standard
                       order: @value;       // Standard
}


// Flexibillity
// ------------
//
// Property Name: flex
// Values: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
.flex (@grow: 1, @shrink: 1, @basis: 0%) {
   -webkit-box-flex: @grow;         // Webkit Old
      // -moz-box-flex: @grow;         // Mozilla Old
       -webkit-flex: @arguments;    // Webkit Standard
          // -moz-flex: @arguments;    // Mozilla Standard
           // -ms-flex: @arguments;    // IE 10 Mid, IE 11 Standard
               flex: @arguments;    // Standard
}


// Longhand - Flex Grow
// --------------------
//
// Property Name: flex-grow
// Value: <number>
.flex-grow(@value: 0) {
    -webkit-flex-grow: @value;      // Webkit Standard
       // -moz-flex-grow: @value;      // Mozilla Standard
        // -ms-flex-grow: @value;      // IE 10 Mid, IE 11 Standard
            flex-grow: @value;      // Standard
}

// Longhand - Flex Shrink
// --------------------
//
// Property Name: flex-shrink
// Value: <number>
.flex-shrink(@value: 1) {
    -webkit-flex-shrink: @value;      // Webkit Standard
       // -moz-flex-shrink: @value;      // Mozilla Standard
        // -ms-flex-shrink: @value;      // IE 10 Mid, IE 11 Standard
            flex-shrink: @value;      // Standard
}

// Longhand - Flex Basis
// --------------------
//
// Property Name: flex-basis
// Value: <number>
.flex-basis(@value: auto) {
    -webkit-flex-basis: @value;      // Webkit Standard
       // -moz-flex-basis: @value;      // Mozilla Standard
        // -ms-flex-basis: @value;      // IE 10 Mid, IE 11 Standard
            flex-basis: @value;      // Standard
}



// Direction
// ---------
//
// Property Name: flex-direction
// Values: row | row-reverse | column | column-reverse
.flex-direction(@value: row) when (@value = row) {
    .box-orient(horizontal);
    .box-direction(normal);
}

.flex-direction(@value: row) when (@value = row-reverse) {
    .box-orient(horizontal);
    .box-direction(reverse);

}

.flex-direction(@value: row) when (@value = column) {
    .box-orient(vertical);
    .box-direction(normal);
}

.flex-direction(@value: row) when (@value = column-reverse) {
    .box-orient(vertical);
    .box-direction(reverse);
}

.flex-direction(@value: row) {
    -webkit-flex-direction: @value;   // Webkit Standard
       // -moz-flex-direction: @value;   // Mozilla Standard
        // -ms-flex-direction: @value;   // IE 10 Mid, IE 11 Standard
            flex-direction: @value;   // Standard
}



// Old Properties
// --------------
.box-direction(@value) {
    -webkit-box-direction: @value;    // Webkit Old
       // -moz-box-direction: @value;    // Mozilla Old
}

.box-orient(@value) {
    -webkit-box-orient: @value;       // Webkit Old
       // -moz-box-orient: @value;       // Mozilla Old
}



// Wrapping
// --------
//
// Property Name: flex-wrap
// Values: nowrap | wrap | wrap-reverse
.flex-wrap(@value: nowrap) when (@value = nowrap) {
    -webkit-box-lines: single;      // Webkit Old
       // -moz-box-lines: single;      // Mozilla Old
}

.flex-wrap(@value: nowrap) when (@value = wrap) {
    -webkit-box-lines: multiple;    // Webkit Old
       // -moz-box-lines: mulitple;    // Mozilla Old
}

.flex-wrap(@value: nowrap) {
    -webkit-flex-wrap: @value;      // Webkit Standard
       // -moz-flex-wrap: @value;      // Mozilla Standard
        // -ms-flex-wrap: @value;      // IE 10 Mid, IE 11 Standard
            flex-wrap: @value;      // Standard
}


// Shorthand - Flex Flow
// ---------------------
//
// Property Name: flex-flow
// Values: <‘flex-direction’> || <‘flex-wrap’>
.flex-flow(@direction: row, @wrap: nowrap) {
    -webkit-flex-flow: @arguments;    // Webkit Standard
       // -moz-flex-flow: @arguments;    // Mozilla Standard
        // -ms-flex-flow: @arguments;    // IE 10 Mid, IE 11 Standard
            flex-flow: @arguments;
}