Instantly share code, notes, and snippets.

Embed
What would you like to do?
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 items
// <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.

Owner

jayj commented Nov 4, 2012

@jayj

This comment has been minimized.

@jayj

This comment has been minimized.

Owner

jayj commented Nov 8, 2012

@mismith

This comment has been minimized.

mismith commented Jan 14, 2013

Thank you for this!

@jayj

This comment has been minimized.

Owner

jayj commented Jan 19, 2013

You're welcome :)

@pikilon

This comment has been minimized.

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.

lericson commented 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?

@kenstone

This comment has been minimized.

kenstone commented 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.

@jayj

This comment has been minimized.

Owner

jayj commented Jul 31, 2013

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

@jayj

This comment has been minimized.

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.

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.

wzr1337 commented Aug 31, 2013

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

@3jerregaard

This comment has been minimized.

3jerregaard commented Jul 3, 2014

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

@ionlyseespots

This comment has been minimized.

ionlyseespots commented Sep 29, 2014

This is nice work, thank you for this.

@ecarlisle

This comment has been minimized.

ecarlisle commented Mar 5, 2015

Really appreciate this! Thank you!

@teabyii

This comment has been minimized.

teabyii commented Apr 16, 2015

Wonderful ~~

@ecarlisle

This comment has been minimized.

ecarlisle commented 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?

@jayj

This comment has been minimized.

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.

maicolsantos commented Sep 21, 2015

@pafnuty

This comment has been minimized.

pafnuty commented Feb 18, 2016

@jayj -moz- prefix no longer needed

@ReactorboY

This comment has been minimized.

ReactorboY commented Jun 5, 2016

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

@davidmars

This comment has been minimized.

davidmars commented Jun 12, 2016

perfect !

@jayj

This comment has been minimized.

Owner

jayj commented Jun 23, 2016

@pafnuty thanks, removed the -moz- prefix

@drpain

This comment has been minimized.

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.

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