CSS3 Flexbox - LESS Mixins

flexbox.less

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

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?

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.

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

@pikilon

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

@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.

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

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

This is nice work, thank you for this.

Really appreciate this! Thank you!

Wonderful ~~

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?

@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.

nice
http://demo.agektmr.com/flexbox/

@jayj -moz- prefix no longer needed

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

perfect !

@pafnuty thanks, removed the -moz- prefix

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

Thank you for help !

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.
https://sclinbio.com/

echo "# sclin" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/sclinbio/sclin.git
git push -u origin main
git remote add origin https://github.com/sclinbio/sclin.git
git branch -M main
git push -u origin main

THIS IS VERY USEFULL BLOG INFOMATION WAS AMAZING WOW https://sclinbio.com/