Skip to content

Instantly share code, notes, and snippets.

@MHM5000

MHM5000/flexbox-lite.less

Forked from jayj/flexbox.less
Last active September 26, 2017 12:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MHM5000/95e32b720da28f805aa9cda3e14ae8f5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MHM5000/95e32b720da28f805aa9cda3e14ae8f5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. MHM5000 revised this gist Sep 26, 2017. 1 changed file with 51 additions and 0 deletions.
    51 changes: 51 additions & 0 deletions flexbox-lite.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    .flex-display(@display: flex) {
    display: @display;
    }

    .flex(@columns: initial) {
    flex: @columns;
    }

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

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

    .flex-flow(@flow) {
    flex-flow: @flow;
    }

    .flex-order(@order: 0) {
    order: @order;
    }

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

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

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

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

    .align-content(@align: stretch) {
    align-content: @align;
    }

    .align-items(@align: stretch) {
    align-items: @align;
    }

    .align-self(@align: auto) {
    align-self: @align;
    }
  2. MHM5000 revised this gist Sep 26, 2017. 1 changed file with 15 additions and 40 deletions.
    55 changes: 15 additions & 40 deletions flexbox.less
    View file
    Original file line number Diff line number Diff line change
    @@ -3,120 +3,95 @@
    // The spec: http://www.w3.org/TR/css3-flexbox
    // --------------------------------------------------

    // Use Autoprefixer for Browser Compatibility

    // Flexbox display
    // flex or inline-flex
    .flex-display(@display: flex) {
    display: ~"-webkit-@{display}";
    display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
    display: ~"-ms-@{display}"; // IE11
    display: @display;
    display: @display;
    }

    // The 'flex' shorthand
    // - applies to: flex items
    // <positive-number>, initial, auto, or none
    .flex(@columns: initial) {
    -webkit-flex: @columns;
    -ms-flex: @columns;
    flex: @columns;
    flex: @columns;
    }

    // Flex Flow Direction
    // - applies to: flex containers
    // row | row-reverse | column | column-reverse
    .flex-direction(@direction: row) {
    -webkit-flex-direction: @direction;
    -ms-flex-direction: @direction;
    flex-direction: @direction;
    flex-direction: @direction;
    }

    // Flex Line Wrapping
    // - applies to: flex containers
    // nowrap | wrap | wrap-reverse
    .flex-wrap(@wrap: nowrap) {
    -webkit-flex-wrap: @wrap;
    -ms-flex-wrap: @wrap;
    flex-wrap: @wrap;
    flex-wrap: @wrap;
    }

    // Flex Direction and Wrap
    // - applies to: flex containers
    // <flex-direction> || <flex-wrap>
    .flex-flow(@flow) {
    -webkit-flex-flow: @flow;
    -ms-flex-flow: @flow;
    flex-flow: @flow;
    flex-flow: @flow;
    }

    // Display Order
    // - applies to: flex items
    // <integer>
    .flex-order(@order: 0) {
    -webkit-order: @order;
    -ms-order: @order;
    order: @order;
    order: @order;
    }

    // Flex grow factor
    // - applies to: flex items
    // <number>
    .flex-grow(@grow: 0) {
    -webkit-flex-grow: @grow;
    -ms-flex-grow: @grow;
    flex-grow: @grow;
    flex-grow: @grow;
    }

    // Flex shrink
    // - applies to: flex item shrink factor
    // <number>
    .flex-shrink(@shrink: 1) {
    -webkit-flex-shrink: @shrink;
    -ms-flex-shrink: @shrink;
    flex-shrink: @shrink;
    flex-shrink: @shrink;
    }

    // Flex basis
    // - the initial main size of the flex item
    // - applies to: flex itemsnitial main size of the flex item
    // <width>
    .flex-basis(@width: auto) {
    -webkit-flex-basis: @width;
    -ms-flex-basis: @width;
    flex-basis: @width;
    flex-basis: @width;
    }

    // Axis Alignment
    // - applies to: flex containers
    // flex-start | flex-end | center | space-between | space-around
    .justify-content(@justify: flex-start) {
    -webkit-justify-content: @justify;
    -ms-justify-content: @justify;
    justify-content: @justify;
    justify-content: @justify;
    }

    // Packing Flex Lines
    // - applies to: multi-line flex containers
    // flex-start | flex-end | center | space-between | space-around | stretch
    .align-content(@align: stretch) {
    -webkit-align-content: @align;
    -ms-align-content: @align;
    align-content: @align;
    align-content: @align;
    }

    // Cross-axis Alignment
    // - applies to: flex containers
    // flex-start | flex-end | center | baseline | stretch
    .align-items(@align: stretch) {
    -webkit-align-items: @align;
    -ms-align-items: @align;
    align-items: @align;
    align-items: @align;
    }

    // Cross-axis Alignment
    // - applies to: flex items
    // auto | flex-start | flex-end | center | baseline | stretch
    .align-self(@align: auto) {
    -webkit-align-self: @align;
    -ms-align-self: @align;
    align-self: @align;
    align-self: @align;
    }
  3. @jayj jayj revised this gist Jun 23, 2016. 1 changed file with 0 additions and 13 deletions.
    13 changes: 0 additions & 13 deletions flexbox.less
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,6 @@
    // flex or inline-flex
    .flex-display(@display: flex) {
    display: ~"-webkit-@{display}";
    display: ~"-moz-@{display}";
    display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
    display: ~"-ms-@{display}"; // IE11
    display: @display;
    @@ -18,7 +17,6 @@
    // <positive-number>, initial, auto, or none
    .flex(@columns: initial) {
    -webkit-flex: @columns;
    -moz-flex: @columns;
    -ms-flex: @columns;
    flex: @columns;
    }
    @@ -28,7 +26,6 @@
    // row | row-reverse | column | column-reverse
    .flex-direction(@direction: row) {
    -webkit-flex-direction: @direction;
    -moz-flex-direction: @direction;
    -ms-flex-direction: @direction;
    flex-direction: @direction;
    }
    @@ -38,7 +35,6 @@
    // nowrap | wrap | wrap-reverse
    .flex-wrap(@wrap: nowrap) {
    -webkit-flex-wrap: @wrap;
    -moz-flex-wrap: @wrap;
    -ms-flex-wrap: @wrap;
    flex-wrap: @wrap;
    }
    @@ -48,7 +44,6 @@
    // <flex-direction> || <flex-wrap>
    .flex-flow(@flow) {
    -webkit-flex-flow: @flow;
    -moz-flex-flow: @flow;
    -ms-flex-flow: @flow;
    flex-flow: @flow;
    }
    @@ -58,7 +53,6 @@
    // <integer>
    .flex-order(@order: 0) {
    -webkit-order: @order;
    -moz-order: @order;
    -ms-order: @order;
    order: @order;
    }
    @@ -68,7 +62,6 @@
    // <number>
    .flex-grow(@grow: 0) {
    -webkit-flex-grow: @grow;
    -moz-flex-grow: @grow;
    -ms-flex-grow: @grow;
    flex-grow: @grow;
    }
    @@ -78,7 +71,6 @@
    // <number>
    .flex-shrink(@shrink: 1) {
    -webkit-flex-shrink: @shrink;
    -moz-flex-shrink: @shrink;
    -ms-flex-shrink: @shrink;
    flex-shrink: @shrink;
    }
    @@ -89,7 +81,6 @@
    // <width>
    .flex-basis(@width: auto) {
    -webkit-flex-basis: @width;
    -moz-flex-basis: @width;
    -ms-flex-basis: @width;
    flex-basis: @width;
    }
    @@ -99,7 +90,6 @@
    // flex-start | flex-end | center | space-between | space-around
    .justify-content(@justify: flex-start) {
    -webkit-justify-content: @justify;
    -moz-justify-content: @justify;
    -ms-justify-content: @justify;
    justify-content: @justify;
    }
    @@ -109,7 +99,6 @@
    // flex-start | flex-end | center | space-between | space-around | stretch
    .align-content(@align: stretch) {
    -webkit-align-content: @align;
    -moz-align-content: @align;
    -ms-align-content: @align;
    align-content: @align;
    }
    @@ -119,7 +108,6 @@
    // flex-start | flex-end | center | baseline | stretch
    .align-items(@align: stretch) {
    -webkit-align-items: @align;
    -moz-align-items: @align;
    -ms-align-items: @align;
    align-items: @align;
    }
    @@ -129,7 +117,6 @@
    // auto | flex-start | flex-end | center | baseline | stretch
    .align-self(@align: auto) {
    -webkit-align-self: @align;
    -moz-align-self: @align;
    -ms-align-self: @align;
    align-self: @align;
    }
  4. @jayj jayj revised this gist Apr 10, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions flexbox.less
    View file
    Original file line number Diff line number Diff line change
    @@ -73,8 +73,8 @@
    flex-grow: @grow;
    }

    // Flex shr
    // - applies to: flex itemsink factor
    // Flex shrink
    // - applies to: flex item shrink factor
    // <number>
    .flex-shrink(@shrink: 1) {
    -webkit-flex-shrink: @shrink;
  5. @jayj jayj renamed this gist Jul 31, 2013. 1 changed file with 0 additions and 0 deletions.
    0 flexbox.less.css → flexbox.less
    View file
    File renamed without changes.
  6. @jayj jayj revised this gist Jul 31, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions flexbox.less.css
    View file
    Original file line number Diff line number Diff line change
    @@ -9,6 +9,7 @@
    display: ~"-webkit-@{display}";
    display: ~"-moz-@{display}";
    display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
    display: ~"-ms-@{display}"; // IE11
    display: @display;
    }

  7. @jayj jayj revised this gist May 22, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox.less.css
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@
    .flex-display(@display: flex) {
    display: ~"-webkit-@{display}";
    display: ~"-moz-@{display}";
    display: ~"-ms-@{display}";
    display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
    display: @display;
    }

  8. @jayj jayj renamed this gist May 22, 2013. 1 changed file with 0 additions and 0 deletions.
    0 mixins.less.css → flexbox.less.css
    View file
    File renamed without changes.
  9. @jayj jayj revised this gist Jan 19, 2013. 1 changed file with 12 additions and 12 deletions.
    24 changes: 12 additions & 12 deletions mixins.less.css
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@
    }

    // The 'flex' shorthand
    // Applies to: flex items
    // - applies to: flex items
    // <positive-number>, initial, auto, or none
    .flex(@columns: initial) {
    -webkit-flex: @columns;
    @@ -23,7 +23,7 @@
    }

    // Flex Flow Direction
    // Applies to: flex containers
    // - applies to: flex containers
    // row | row-reverse | column | column-reverse
    .flex-direction(@direction: row) {
    -webkit-flex-direction: @direction;
    @@ -33,7 +33,7 @@
    }

    // Flex Line Wrapping
    // Applies to: flex containers
    // - applies to: flex containers
    // nowrap | wrap | wrap-reverse
    .flex-wrap(@wrap: nowrap) {
    -webkit-flex-wrap: @wrap;
    @@ -43,7 +43,7 @@
    }

    // Flex Direction and Wrap
    // Applies to: flex containers
    // - applies to: flex containers
    // <flex-direction> || <flex-wrap>
    .flex-flow(@flow) {
    -webkit-flex-flow: @flow;
    @@ -53,7 +53,7 @@
    }

    // Display Order
    // Applies to: flex items
    // - applies to: flex items
    // <integer>
    .flex-order(@order: 0) {
    -webkit-order: @order;
    @@ -63,7 +63,7 @@
    }

    // Flex grow factor
    // Applies to: flex items
    // - applies to: flex items
    // <number>
    .flex-grow(@grow: 0) {
    -webkit-flex-grow: @grow;
    @@ -73,7 +73,7 @@
    }

    // Flex shr
    // Applies to: flex itemsink factor
    // - applies to: flex itemsink factor
    // <number>
    .flex-shrink(@shrink: 1) {
    -webkit-flex-shrink: @shrink;
    @@ -84,7 +84,7 @@

    // Flex basis
    // - the initial main size of the flex item
    // Applies to: flex itemsnitial main size of the flex item
    // - applies to: flex itemsnitial main size of the flex item
    // <width>
    .flex-basis(@width: auto) {
    -webkit-flex-basis: @width;
    @@ -94,7 +94,7 @@
    }

    // Axis Alignment
    // Applies to: flex containers
    // - applies to: flex containers
    // flex-start | flex-end | center | space-between | space-around
    .justify-content(@justify: flex-start) {
    -webkit-justify-content: @justify;
    @@ -104,7 +104,7 @@
    }

    // Packing Flex Lines
    // Applies to: multi-line flex containers
    // - applies to: multi-line flex containers
    // flex-start | flex-end | center | space-between | space-around | stretch
    .align-content(@align: stretch) {
    -webkit-align-content: @align;
    @@ -114,7 +114,7 @@
    }

    // Cross-axis Alignment
    // Applies to: flex containers
    // - applies to: flex containers
    // flex-start | flex-end | center | baseline | stretch
    .align-items(@align: stretch) {
    -webkit-align-items: @align;
    @@ -124,7 +124,7 @@
    }

    // Cross-axis Alignment
    // Applies to: flex items
    // - applies to: flex items
    // auto | flex-start | flex-end | center | baseline | stretch
    .align-self(@align: auto) {
    -webkit-align-self: @align;
  10. @jayj jayj revised this gist Jan 19, 2013. 1 changed file with 35 additions and 7 deletions.
    42 changes: 35 additions & 7 deletions mixins.less.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,9 @@
    // See description: http://www.w3.org/TR/css3-flexbox
    // --------------------------------------------------
    // Flexbox LESS mixins
    // The spec: http://www.w3.org/TR/css3-flexbox
    // --------------------------------------------------

    // Flexbox display
    // flex or inline-flex
    .flex-display(@display: flex) {
    display: ~"-webkit-@{display}";
    @@ -9,6 +12,8 @@
    display: @display;
    }

    // The 'flex' shorthand
    // Applies to: flex items
    // <positive-number>, initial, auto, or none
    .flex(@columns: initial) {
    -webkit-flex: @columns;
    @@ -17,6 +22,8 @@
    flex: @columns;
    }

    // Flex Flow Direction
    // Applies to: flex containers
    // row | row-reverse | column | column-reverse
    .flex-direction(@direction: row) {
    -webkit-flex-direction: @direction;
    @@ -25,6 +32,8 @@
    flex-direction: @direction;
    }

    // Flex Line Wrapping
    // Applies to: flex containers
    // nowrap | wrap | wrap-reverse
    .flex-wrap(@wrap: nowrap) {
    -webkit-flex-wrap: @wrap;
    @@ -33,6 +42,8 @@
    flex-wrap: @wrap;
    }

    // Flex Direction and Wrap
    // Applies to: flex containers
    // <flex-direction> || <flex-wrap>
    .flex-flow(@flow) {
    -webkit-flex-flow: @flow;
    @@ -41,6 +52,8 @@
    flex-flow: @flow;
    }

    // Display Order
    // Applies to: flex items
    // <integer>
    .flex-order(@order: 0) {
    -webkit-order: @order;
    @@ -49,6 +62,8 @@
    order: @order;
    }

    // Flex grow factor
    // Applies to: flex items
    // <number>
    .flex-grow(@grow: 0) {
    -webkit-flex-grow: @grow;
    @@ -57,47 +72,60 @@
    flex-grow: @grow;
    }

    // <number>
    // Flex shr
    // Applies to: flex itemsink factor
    // <number>
    .flex-shrink(@shrink: 1) {
    -webkit-flex-shrink: @shrink;
    -moz-flex-shrink: @shrink;
    -ms-flex-shrink: @shrink;
    flex-shrink: @shrink;
    }

    // <width>
    // Flex basis
    // - the initial main size of the flex item
    // Applies to: flex itemsnitial main size of the flex item
    // <width>
    .flex-basis(@width: auto) {
    -webkit-flex-basis: @width;
    -moz-flex-basis: @width;
    -ms-flex-basis: @width;
    flex-basis: @width;
    }

    // flex-start | flex-end | center | space-between | space-around
    // Axis Alignment
    // Applies to: flex containers
    // flex-start | flex-end | center | space-between | space-around
    .justify-content(@justify: flex-start) {
    -webkit-justify-content: @justify;
    -moz-justify-content: @justify;
    -ms-justify-content: @justify;
    justify-content: @justify;
    }

    // flex-start | flex-end | center | space-between | space-around | stretch
    // Packing Flex Lines
    // Applies to: multi-line flex containers
    // flex-start | flex-end | center | space-between | space-around | stretch
    .align-content(@align: stretch) {
    -webkit-align-content: @align;
    -moz-align-content: @align;
    -ms-align-content: @align;
    align-content: @align;
    }

    // flex-start | flex-end | center | baseline | stretch
    // Cross-axis Alignment
    // Applies to: flex containers
    // flex-start | flex-end | center | baseline | stretch
    .align-items(@align: stretch) {
    -webkit-align-items: @align;
    -moz-align-items: @align;
    -ms-align-items: @align;
    align-items: @align;
    }

    // auto | flex-start | flex-end | center | baseline | stretch
    // Cross-axis Alignment
    // Applies to: flex items
    // auto | flex-start | flex-end | center | baseline | stretch
    .align-self(@align: auto) {
    -webkit-align-self: @align;
    -moz-align-self: @align;
  11. @jayj jayj revised this gist Jan 19, 2013. 1 changed file with 0 additions and 13 deletions.
    13 changes: 0 additions & 13 deletions mixins.less.css
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,6 @@
    display: ~"-webkit-@{display}";
    display: ~"-moz-@{display}";
    display: ~"-ms-@{display}";
    display: ~"-o-@{display}";
    display: @display;
    }

    @@ -15,7 +14,6 @@
    -webkit-flex: @columns;
    -moz-flex: @columns;
    -ms-flex: @columns;
    -o-flex: @columns;
    flex: @columns;
    }

    @@ -24,7 +22,6 @@
    -webkit-flex-direction: @direction;
    -moz-flex-direction: @direction;
    -ms-flex-direction: @direction;
    -o-flex-direction: @direction;
    flex-direction: @direction;
    }

    @@ -33,7 +30,6 @@
    -webkit-flex-wrap: @wrap;
    -moz-flex-wrap: @wrap;
    -ms-flex-wrap: @wrap;
    -o-flex-wrap: @wrap;
    flex-wrap: @wrap;
    }

    @@ -42,7 +38,6 @@
    -webkit-flex-flow: @flow;
    -moz-flex-flow: @flow;
    -ms-flex-flow: @flow;
    -o-flex-flow: @flow;
    flex-flow: @flow;
    }

    @@ -51,7 +46,6 @@
    -webkit-order: @order;
    -moz-order: @order;
    -ms-order: @order;
    -o-order: @order;
    order: @order;
    }

    @@ -60,7 +54,6 @@
    -webkit-flex-grow: @grow;
    -moz-flex-grow: @grow;
    -ms-flex-grow: @grow;
    -o-flex-grow: @grow;
    flex-grow: @grow;
    }

    @@ -69,7 +62,6 @@
    -webkit-flex-shrink: @shrink;
    -moz-flex-shrink: @shrink;
    -ms-flex-shrink: @shrink;
    -o-flex-shrink: @shrink;
    flex-shrink: @shrink;
    }

    @@ -78,7 +70,6 @@
    -webkit-flex-basis: @width;
    -moz-flex-basis: @width;
    -ms-flex-basis: @width;
    -o-flex-basis: @width;
    flex-basis: @width;
    }

    @@ -87,7 +78,6 @@
    -webkit-justify-content: @justify;
    -moz-justify-content: @justify;
    -ms-justify-content: @justify;
    -o-justify-content: @justify;
    justify-content: @justify;
    }

    @@ -96,7 +86,6 @@
    -webkit-align-content: @align;
    -moz-align-content: @align;
    -ms-align-content: @align;
    -o-align-content: @align;
    align-content: @align;
    }

    @@ -105,7 +94,6 @@
    -webkit-align-items: @align;
    -moz-align-items: @align;
    -ms-align-items: @align;
    -o-align-items: @align;
    align-items: @align;
    }

    @@ -114,6 +102,5 @@
    -webkit-align-self: @align;
    -moz-align-self: @align;
    -ms-align-self: @align;
    -o-align-self: @align;
    align-self: @align;
    }
  12. @jayj jayj renamed this gist Nov 4, 2012. 1 changed file with 0 additions and 0 deletions.
    0 mixins.less → mixins.less.css
    View file
    File renamed without changes.
  13. @jayj jayj created this gist Nov 4, 2012.
    119 changes: 119 additions & 0 deletions mixins.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,119 @@
    // See description: http://www.w3.org/TR/css3-flexbox
    // --------------------------------------------------

    // flex or inline-flex
    .flex-display(@display: flex) {
    display: ~"-webkit-@{display}";
    display: ~"-moz-@{display}";
    display: ~"-ms-@{display}";
    display: ~"-o-@{display}";
    display: @display;
    }

    // <positive-number>, initial, auto, or none
    .flex(@columns: initial) {
    -webkit-flex: @columns;
    -moz-flex: @columns;
    -ms-flex: @columns;
    -o-flex: @columns;
    flex: @columns;
    }

    // row | row-reverse | column | column-reverse
    .flex-direction(@direction: row) {
    -webkit-flex-direction: @direction;
    -moz-flex-direction: @direction;
    -ms-flex-direction: @direction;
    -o-flex-direction: @direction;
    flex-direction: @direction;
    }

    // nowrap | wrap | wrap-reverse
    .flex-wrap(@wrap: nowrap) {
    -webkit-flex-wrap: @wrap;
    -moz-flex-wrap: @wrap;
    -ms-flex-wrap: @wrap;
    -o-flex-wrap: @wrap;
    flex-wrap: @wrap;
    }

    // <flex-direction> || <flex-wrap>
    .flex-flow(@flow) {
    -webkit-flex-flow: @flow;
    -moz-flex-flow: @flow;
    -ms-flex-flow: @flow;
    -o-flex-flow: @flow;
    flex-flow: @flow;
    }

    // <integer>
    .flex-order(@order: 0) {
    -webkit-order: @order;
    -moz-order: @order;
    -ms-order: @order;
    -o-order: @order;
    order: @order;
    }

    // <number>
    .flex-grow(@grow: 0) {
    -webkit-flex-grow: @grow;
    -moz-flex-grow: @grow;
    -ms-flex-grow: @grow;
    -o-flex-grow: @grow;
    flex-grow: @grow;
    }

    // <number>
    .flex-shrink(@shrink: 1) {
    -webkit-flex-shrink: @shrink;
    -moz-flex-shrink: @shrink;
    -ms-flex-shrink: @shrink;
    -o-flex-shrink: @shrink;
    flex-shrink: @shrink;
    }

    // <width>
    .flex-basis(@width: auto) {
    -webkit-flex-basis: @width;
    -moz-flex-basis: @width;
    -ms-flex-basis: @width;
    -o-flex-basis: @width;
    flex-basis: @width;
    }

    // flex-start | flex-end | center | space-between | space-around
    .justify-content(@justify: flex-start) {
    -webkit-justify-content: @justify;
    -moz-justify-content: @justify;
    -ms-justify-content: @justify;
    -o-justify-content: @justify;
    justify-content: @justify;
    }

    // flex-start | flex-end | center | space-between | space-around | stretch
    .align-content(@align: stretch) {
    -webkit-align-content: @align;
    -moz-align-content: @align;
    -ms-align-content: @align;
    -o-align-content: @align;
    align-content: @align;
    }

    // flex-start | flex-end | center | baseline | stretch
    .align-items(@align: stretch) {
    -webkit-align-items: @align;
    -moz-align-items: @align;
    -ms-align-items: @align;
    -o-align-items: @align;
    align-items: @align;
    }

    // auto | flex-start | flex-end | center | baseline | stretch
    .align-self(@align: auto) {
    -webkit-align-self: @align;
    -moz-align-self: @align;
    -ms-align-self: @align;
    -o-align-self: @align;
    align-self: @align;
    }