Flexbox LESS Implementation / Wrapper

flexbox-less-impl.less

// --------------------------------------------------
// Flexbox LESS mixins
// Credit to: https://gist.github.com/jayj/ for the mixins
// --------------------------------------------------

// Flexbox display
// 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;
}

// 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 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 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 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;
}

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

// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around 
.justify-content(@justify: flex-start) {
    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;
}

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

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


/************* Flex Implementation *******************/
/*********** By qJake (GitHub/qJake) *****************/

.f
{
    .flex-display();
    .flex-direction();
}
.f-wrap
{
    .flex-wrap(wrap)
}
.fr
{
    .flex-display();
    .flex-direction(column)
}

// Columns
.f
{
    &.f-align-left
    {
        .justify-content(flex-start)
    }
    &.f-align-center
    {
        .justify-content(center)
    }
    &.f-align-right
    {
        .justify-content(flex-end)
    }
    &.f-align-space-around
    {
        .justify-content(space-around)
    }
    &.f-align-space-between
    {
        .justify-content(space-between)
    }

    &.f-valign-top
    {
        .align-items(flex-start)
    }
    &.f-valign-middle
    {
        .align-items(center)
    }
    &.f-valign-bottom
    {
        .align-items(flex-end)
    }
    &.f-valign-baseline
    {
        .align-items(baseline)
    }
    &.f-valign-stretch
    {
        .align-items(stretch)
    }
    
    // Only for use with multiple rows/columns
    &.f-valign-container-top
    {
        .align-content(flex-start)
    }
    &.f-valign-container-middle
    {
        .align-content(center)
    }
    &.f-valign-container-bottom
    {
        .align-content(flex-end)
    }
    &.f-valign-container-baseline
    {
        .align-content(baseline)
    }
    &.f-valign-container-stretch
    {
        .align-content(stretch)
    }
}

// Rows

.fr
{
    &.fr-valign-top
    {
        .justify-content(flex-start)
    }
    &.fr-valign-middle
    {
        .justify-content(center)
    }
    &.fr-valign-bottom
    {
        .justify-content(flex-end)
    }
    &.fr-valign-space-around
    {
        .justify-content(space-around)
    }
    &.fr-valign-space-between
    {
        .justify-content(space-between)
    }

    &.fr-align-left
    {
        .align-items(flex-start)
    }
    &.fr-align-center
    {
        .align-items(center)
    }
    &.fr-align-right
    {
        .align-items(flex-end)
    }
    &.fr-align-baseline
    {
        .align-items(baseline)
    }
    &.fr-align-stretch
    {
        .align-items(stretch)
    }

    // Only for use with multiple rows/columns
    &.fr-align-container-left
    {
        .align-content(flex-start)
    }
    &.fr-align-container-center
    {
        .align-content(center)
    }
    &.fr-align-container-right
    {
        .align-content(flex-end)
    }
    &.fr-align-container-baseline
    {
        .align-content(baseline)
    }
    &.fr-align-container-stretch
    {
        .align-content(stretch)
    }
}

// Child Items
.f, .fr
{
    // Box stretching
    & > .flex
    {
        .flex(1);
    }
    & > .flex-2x
    {
        .flex(2);
    }
    & > .flex-3x
    {
        .flex(3);
    }
    & > .flex-half
    {
        .flex(0.5);
    }
    & > .flex-third
    {
        .flex(0.333);
    }
    & > .flex-quarter
    {
        .flex(0.25);
    }
}

// Self-alignment overrides
.f
{
    & > .f-valign-override-top
    {
        .align-self(flex-start)
    }
    & > .f-valign-override-middle
    {
        .align-self(center)
    }
    & > .f-valign-override-bottom
    {
        .align-self(flex-end)
    }
    & > .f-valign-override-baseline
    {
        .align-self(baseline)
    }
    & > .f-valign-override-stretch
    {
        .align-self(stretch)
    }
}

.fr 
{
    & > .f-align-override-left
    {
        .align-self(flex-start)
    }
    & > .f-align-override-center
    {
        .align-self(center)
    }
    & > .f-align-override-right
    {
        .align-self(flex-end)
    }
    & > .f-align-override-baseline
    {
        .align-self(baseline)
    }
    & > .f-align-override-stretch
    {
        .align-self(stretch)
    }
}