Flex

‹ Back
Warning: Only use these features if you are 100% you won't need to support IE8 or IE9. Please beware of the browser support before using anything on this page.
Please also be aware of the well documented flexbugs when implementing flexbox.

Flexbox Mixins

There are several flexbox related SCSS mixins:

Mixin
@include display-flex;
@include display-inline-flex;
@include flex($value);
@include flex-wrap($value:wrap);
@include flex-direction($value);
@include flex-grow($value);
@include flex-shrink($value);
@include align-items($value);
@include justify-items($value);
@include justify-self($value);

Flex Grid

There are a couple of premade mixins that use the mixins above to create an easy-to-use grid system:

Mixin
@include flex-row($gutter:false)
@include flex-col($width, $gutter:false, $grow:0, $shrink:0)

Hint: you can use the span(x,y) mixin to make setting widths easier. eg: @include flex-col(span(1,2)); for a 50% width column.