Create a gist now

Instantly share code, notes, and snippets.

Embed
CSS3 Flexbox - LESS Mixins
// --------------------------------------------------
// 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}";
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) {
-webkit-order: @order;
-ms-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 shrink
// - applies to: flex item shrink factor
// <number>
.flex-shrink(@shrink: 1) {
-webkit-flex-shrink: @shrink;
-ms-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;
}
// 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;
}
// 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) {
-webkit-align-items: @align;
-ms-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;
}
@jayj

This comment has been minimized.

Show comment
Hide comment
@jayj

jayj Nov 4, 2012

@jayj

This comment has been minimized.

Show comment
Hide comment
@jayj

jayj Nov 8, 2012

@mismith

This comment has been minimized.

Show comment
Hide comment
@mismith

mismith Jan 14, 2013

Thank you for this!

mismith commented Jan 14, 2013

Thank you for this!

@jayj

This comment has been minimized.

Show comment
Hide comment
@jayj

jayj Jan 19, 2013

You're welcome :)

Owner

jayj commented Jan 19, 2013

You're welcome :)

@pikilon

This comment has been minimized.

Show comment
Hide comment
@pikilon

pikilon Jul 10, 2013

Thank you fot the mixins.

I am sure that I am doing something wrong but. Why not to nest mixins and add in the end the new specs.

like this
z
.flex-flow(@direction:row,@Wrap:wrap) {
.flex-direction(@direction);
.flex-wrap(@Wrap);
flex-flow: @direction @Wrap;
}

Why not to do a All in one mixin (nesting what you have) for parent and another all in one for the items?

something like
.flex-container (@flexflow: row wrap,@item-align:blah blah blah) {
.flex-flow:@flexflow;
...
}

pikilon commented Jul 10, 2013

Thank you fot the mixins.

I am sure that I am doing something wrong but. Why not to nest mixins and add in the end the new specs.

like this
z
.flex-flow(@direction:row,@Wrap:wrap) {
.flex-direction(@direction);
.flex-wrap(@Wrap);
flex-flow: @direction @Wrap;
}

Why not to do a All in one mixin (nesting what you have) for parent and another all in one for the items?

something like
.flex-container (@flexflow: row wrap,@item-align:blah blah blah) {
.flex-flow:@flexflow;
...
}

@lericson

This comment has been minimized.

Show comment
Hide comment
@lericson

lericson Jul 25, 2013

Hmm, I thought the MS prefixes differed like so:

div {
  align-items: flex-start;  /* upcoming standard */
  -webkit-align-items: flex-start;  /* webkit style */
  -ms-align-items: start;  /* ms style, notice no flex- */
}

ISTM these macros won't work on MS browsers! Do they?

Hmm, I thought the MS prefixes differed like so:

div {
  align-items: flex-start;  /* upcoming standard */
  -webkit-align-items: flex-start;  /* webkit style */
  -ms-align-items: start;  /* ms style, notice no flex- */
}

ISTM these macros won't work on MS browsers! Do they?

@kenstone

This comment has been minimized.

Show comment
Hide comment
@kenstone

kenstone Jul 26, 2013

No, they don't work in MS browsers. There's a set here https://gist.github.com/kenstone/5460000 that does work in MS browsers.

No, they don't work in MS browsers. There's a set here https://gist.github.com/kenstone/5460000 that does work in MS browsers.

@jayj

This comment has been minimized.

Show comment
Hide comment
@jayj

jayj Jul 31, 2013

Another Flexbox reference:
http://ptb2.me/flexbox/

Owner

jayj commented Jul 31, 2013

Another Flexbox reference:
http://ptb2.me/flexbox/

@jayj

This comment has been minimized.

Show comment
Hide comment
@jayj

jayj Jul 31, 2013

@pikilon

Feel free to fork this gist. For me, I don't see the benefit of an all-in-one mixin.

Owner

jayj commented Jul 31, 2013

@pikilon

Feel free to fork this gist. For me, I don't see the benefit of an all-in-one mixin.

@jayj

This comment has been minimized.

Show comment
Hide comment
@jayj

jayj Jul 31, 2013

@lericson

As @kenstone noted, the IE10 Flexbox syntax is different. IE11 should use the unprefixed version of this syntax.

It's quite confusing with all these different syntaxes.

Owner

jayj commented Jul 31, 2013

@lericson

As @kenstone noted, the IE10 Flexbox syntax is different. IE11 should use the unprefixed version of this syntax.

It's quite confusing with all these different syntaxes.

@wzr1337

This comment has been minimized.

Show comment
Hide comment
@wzr1337

wzr1337 Aug 31, 2013

I fixed the flex box old style in my fork, check it out..

wzr1337 commented Aug 31, 2013

I fixed the flex box old style in my fork, check it out..

@3jerregaard

This comment has been minimized.

Show comment
Hide comment
@3jerregaard

3jerregaard Jul 3, 2014

Thx for this solution - fixed my flexbox issues in a jiffy 👍

Thx for this solution - fixed my flexbox issues in a jiffy 👍

@ionlyseespots

This comment has been minimized.

Show comment
Hide comment
@ionlyseespots

ionlyseespots Sep 29, 2014

This is nice work, thank you for this.

This is nice work, thank you for this.

@ecarlisle

This comment has been minimized.

Show comment
Hide comment
@ecarlisle

ecarlisle Mar 5, 2015

Really appreciate this! Thank you!

Really appreciate this! Thank you!

@teabyii

This comment has been minimized.

Show comment
Hide comment
@teabyii

teabyii Apr 16, 2015

Wonderful ~~

teabyii commented Apr 16, 2015

Wonderful ~~

@ecarlisle

This comment has been minimized.

Show comment
Hide comment
@ecarlisle

ecarlisle Apr 19, 2015

Have you considered making this into a repo that can be fetched via Bower or NPM? I would love that (and could do that, but uncertain about the mechanics of Gists and Repos, converting, forking, etc... rather than copying into one of my repos. Thoughts?

Have you considered making this into a repo that can be fetched via Bower or NPM? I would love that (and could do that, but uncertain about the mechanics of Gists and Repos, converting, forking, etc... rather than copying into one of my repos. Thoughts?

@jayj

This comment has been minimized.

Show comment
Hide comment
@jayj

jayj Jun 12, 2015

@ecarlisle No, I haven't thought about that. Personally I don't use these mixins anymore (I use Autoprefixer instead) but I'll look into it when I have some time.

Owner

jayj commented Jun 12, 2015

@ecarlisle No, I haven't thought about that. Personally I don't use these mixins anymore (I use Autoprefixer instead) but I'll look into it when I have some time.

@maicolsantos

This comment has been minimized.

Show comment
Hide comment
@pafnuty

This comment has been minimized.

Show comment
Hide comment
@pafnuty

pafnuty Feb 18, 2016

@jayj -moz- prefix no longer needed

pafnuty commented Feb 18, 2016

@jayj -moz- prefix no longer needed

@ReactorboY

This comment has been minimized.

Show comment
Hide comment
@ReactorboY

ReactorboY Jun 5, 2016

Very helpful for me. Love to find solution here :)

Very helpful for me. Love to find solution here :)

@davidmars

This comment has been minimized.

Show comment
Hide comment
@davidmars

davidmars Jun 12, 2016

perfect !

perfect !

@jayj

This comment has been minimized.

Show comment
Hide comment
@jayj

jayj Jun 23, 2016

@pafnuty thanks, removed the -moz- prefix

Owner

jayj commented Jun 23, 2016

@pafnuty thanks, removed the -moz- prefix

@drpain

This comment has been minimized.

Show comment
Hide comment
@drpain

drpain Nov 10, 2016

I found this pretty awesome set of mixins, note the IE 10 fixes. This helps to make sure that IE10 which uses a different implementation also works as on other browsers.

http://www.flexdatabases.com/templates/flex_template/css/old.less

This is easily written into you're normal mixins to maintain uniformity between IE10 and newer browsers. So far this has been working well for me:

//IE10 fixes
.mixin-flex-wrap(@wrap) when (@wrap = nowrap) {
    -ms-flex-wrap: none;
}

.mixin-justify-content(@justify) when (@justify = flex-start) {
    -ms-flex-pack: start;
}
.mixin-justify-content(@justify) when (@justify = flex-end) {
    -ms-flex-pack: end;
}
.mixin-justify-content(@justify) when (@justify = space-between) {
    -ms-flex-pack: justify;
}

.mixin-align-items(@align-item) when (@align-item = flex-start) {
    -ms-flex-align: start;
}
.mixin-align-items(@align-item) when (@align-item = flex-end) {
    -ms-flex-align: end;
}
.mixin-align-items(@align-item) when (@align-item = stretch) {
    -ms-flex-align: stretch;
}

.mixin-align-content(@align-content) when (@align-content = flex-start) {
    -ms-flex-line-pack: start;
}
.mixin-align-content(@align-content) when (@align-content = flex-end) {
    -ms-flex-line-pack: end;
}
.mixin-align-content(@align-content) when (@align-content = stretch) {
    -ms-flex-line-pack: stretch;
}

.mixin-align-self(@align-self) when (@align-self = flex-start) {
    -ms-flex-item-align: start;
}
.mixin-align-self(@align-self) when (@align-self = flex-end) {
    -ms-flex-item-align: end;
}

An example SCSS of the combination:

@mixin flex-direction($direction: row) {
  -webkit-flex-direction: $direction;
      -ms-flex-direction: $direction;
          flex-direction: $direction;
}

@mixin flex-wrap($wrap: nowrap) {
  @if $wrap == nowrap {
    -ms-flex-wrap: none;
  }
  @else {
    -ms-flex-wrap: $wrap;
  }
  -webkit-flex-wrap: $wrap;
          flex-wrap: $wrap;
}

@mixin flex-order($order: 0) {
  -ms-flex-order: $order;
  -webkit-order: $order;
      -ms-order: $order;
          order: $order;
}

@mixin justify-content($justify: flex-start) {
  @if $justify == flex-start {
    -ms-flex-pack: start;
  }
  @else if $justify == flex-end {
    -ms-flex-pack: end;
  }
  @elseif $justify == space-between {
    -ms-flex-pack: justify;
  }
  @else {
    -ms-flex-pack: $justify;
  }
  -webkit-justify-content: $justify;
      -ms-justify-content: $justify;
          justify-content: $justify;
}

@mixin align-items($align: auto) {
  @if $align == flex-start {
    -ms-flex-align: start;
  }
  @else if $align == flex-end {
    -ms-flex-align: end;
  }
  @else {
    -ms-flex-align: $align;
  }
  -webkit-align-items: $align;
      -ms-align-items: $align;
          align-items: $align;
}

@mixin align-content($align: auto) {
  @if $align == flex-start {
    -ms-flex-line-pack: start;
  }
  @else if $align == flex-end {
    -ms-flex-line-pack: end;
  }
  @else {
    -ms-flex-line-pack: $align;
  }
  -webkit-align-content: $align;
      -ms-align-content: $align;
          align-content: $align;
}

@mixin align-self($align: auto) {
  @if $align == flex-start {
    -ms-flex-item-align: start;
  }
  @else if $align == flex-end {
    -ms-flex-item-align: end;
  }
  @else {
    -ms-flex-item-align: $align;
  }
  -webkit-align-self: $align;
      -ms-align-self: $align;
          align-self: $align;
}

@mixin flex($value){
  -webkit-box-flex: $value;
  -moz-box-flex: $value;
  -webkit-flex: $value;
  -ms-flex: $value;
  flex: $value;
}

@mixin flex-display($important: false){
  @if ($important) {
    display: -webkit-box!important;
    display: -moz-box!important;
    display: -ms-flexbox!important;
    display: -webkit-flex!important;
    display: flex!important;
  }
  @else {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
}

drpain commented Nov 10, 2016

I found this pretty awesome set of mixins, note the IE 10 fixes. This helps to make sure that IE10 which uses a different implementation also works as on other browsers.

http://www.flexdatabases.com/templates/flex_template/css/old.less

This is easily written into you're normal mixins to maintain uniformity between IE10 and newer browsers. So far this has been working well for me:

//IE10 fixes
.mixin-flex-wrap(@wrap) when (@wrap = nowrap) {
    -ms-flex-wrap: none;
}

.mixin-justify-content(@justify) when (@justify = flex-start) {
    -ms-flex-pack: start;
}
.mixin-justify-content(@justify) when (@justify = flex-end) {
    -ms-flex-pack: end;
}
.mixin-justify-content(@justify) when (@justify = space-between) {
    -ms-flex-pack: justify;
}

.mixin-align-items(@align-item) when (@align-item = flex-start) {
    -ms-flex-align: start;
}
.mixin-align-items(@align-item) when (@align-item = flex-end) {
    -ms-flex-align: end;
}
.mixin-align-items(@align-item) when (@align-item = stretch) {
    -ms-flex-align: stretch;
}

.mixin-align-content(@align-content) when (@align-content = flex-start) {
    -ms-flex-line-pack: start;
}
.mixin-align-content(@align-content) when (@align-content = flex-end) {
    -ms-flex-line-pack: end;
}
.mixin-align-content(@align-content) when (@align-content = stretch) {
    -ms-flex-line-pack: stretch;
}

.mixin-align-self(@align-self) when (@align-self = flex-start) {
    -ms-flex-item-align: start;
}
.mixin-align-self(@align-self) when (@align-self = flex-end) {
    -ms-flex-item-align: end;
}

An example SCSS of the combination:

@mixin flex-direction($direction: row) {
  -webkit-flex-direction: $direction;
      -ms-flex-direction: $direction;
          flex-direction: $direction;
}

@mixin flex-wrap($wrap: nowrap) {
  @if $wrap == nowrap {
    -ms-flex-wrap: none;
  }
  @else {
    -ms-flex-wrap: $wrap;
  }
  -webkit-flex-wrap: $wrap;
          flex-wrap: $wrap;
}

@mixin flex-order($order: 0) {
  -ms-flex-order: $order;
  -webkit-order: $order;
      -ms-order: $order;
          order: $order;
}

@mixin justify-content($justify: flex-start) {
  @if $justify == flex-start {
    -ms-flex-pack: start;
  }
  @else if $justify == flex-end {
    -ms-flex-pack: end;
  }
  @elseif $justify == space-between {
    -ms-flex-pack: justify;
  }
  @else {
    -ms-flex-pack: $justify;
  }
  -webkit-justify-content: $justify;
      -ms-justify-content: $justify;
          justify-content: $justify;
}

@mixin align-items($align: auto) {
  @if $align == flex-start {
    -ms-flex-align: start;
  }
  @else if $align == flex-end {
    -ms-flex-align: end;
  }
  @else {
    -ms-flex-align: $align;
  }
  -webkit-align-items: $align;
      -ms-align-items: $align;
          align-items: $align;
}

@mixin align-content($align: auto) {
  @if $align == flex-start {
    -ms-flex-line-pack: start;
  }
  @else if $align == flex-end {
    -ms-flex-line-pack: end;
  }
  @else {
    -ms-flex-line-pack: $align;
  }
  -webkit-align-content: $align;
      -ms-align-content: $align;
          align-content: $align;
}

@mixin align-self($align: auto) {
  @if $align == flex-start {
    -ms-flex-item-align: start;
  }
  @else if $align == flex-end {
    -ms-flex-item-align: end;
  }
  @else {
    -ms-flex-item-align: $align;
  }
  -webkit-align-self: $align;
      -ms-align-self: $align;
          align-self: $align;
}

@mixin flex($value){
  -webkit-box-flex: $value;
  -moz-box-flex: $value;
  -webkit-flex: $value;
  -ms-flex: $value;
  flex: $value;
}

@mixin flex-display($important: false){
  @if ($important) {
    display: -webkit-box!important;
    display: -moz-box!important;
    display: -ms-flexbox!important;
    display: -webkit-flex!important;
    display: flex!important;
  }
  @else {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
}
@mcmwhfy

This comment has been minimized.

Show comment
Hide comment
@mcmwhfy

mcmwhfy Mar 3, 2017

Thank you for help !

mcmwhfy commented Mar 3, 2017

Thank you for help !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment