Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Flexbox - Sass Mixins
// --------------------------------------------------
// Flexbox SASS mixins
// The spec: http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------
// Flexbox display
@mixin flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
// Inline flex display
@mixin inline-flex {
display: -webkit-inline-box;
display: -moz-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
@mixin flex($fg: 1, $fs: 0, $fb: auto) {
// Set a variable to be used by box-flex properties
$fg-boxflex: $fg;
// Box-Flex only supports a flex-grow value so lets grab the
// first item in the list and just return that.
@if type-of($fg) == 'list' {
$fg-boxflex: nth($fg, 1);
}
-webkit-box: $fg-boxflex;
-moz-box: $fg-boxflex;
-webkit-flex: $fg $fs $fb;
-ms-flex: $fg $fs $fb;
flex: $fg $fs $fb;
}
// Flex Flow Direction
// - applies to: flex containers
// row (default) | row-reverse | column | column-reverse
@mixin flex-direction($direction: row) {
@if $direction == row-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-box-direction: reverse;
-moz-box-orient: horizontal;
} @else if $direction == column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-direction: normal;
-moz-box-orient: vertical;
} @else if $direction == column-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-box-direction: reverse;
-moz-box-orient: vertical;
} @else {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-direction: normal;
-moz-box-orient: horizontal;
}
-webkit-flex-direction: $direction;
-ms-flex-direction: $direction;
flex-direction: $direction;
}
// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
@mixin flex-wrap($value: nowrap) {
// No Webkit/FF Box fallback.
-webkit-flex-wrap: $value;
@if $value == nowrap {
-ms-flex-wrap: none;
} @else {
-ms-flex-wrap: $value;
}
flex-wrap: $value;
}
// Flex Direction and Wrap
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
@mixin flex-flow($values: (row nowrap)) {
// No Webkit/FF Box fallback.
-webkit-flex-flow: $values;
-ms-flex-flow: $values;
flex-flow: $values;
}
// Display Order
// - applies to: flex items
// <integer>
@mixin order($int: 0) {
-webkit-box-ordinal-group: $int + 1;
-moz-box-ordinal-group: $int + 1;
-webkit-order: $int;
-ms-flex-order: $int;
order: $int;
}
// Flex grow factor
// - applies to: flex items
// <number>
@mixin flex-grow($int: 1) {
-webkit-box-flex: $int;
-moz-box-flex: $int;
-webkit-flex-grow: $int;
-ms-flex: $int;
flex-grow: $int;
}
// Flex shrink
// - applies to: flex item shrink factor
// <number>
@mixin flex-shrink($int: 0) {
-webkit-flex-shrink: $int;
-moz-flex-shrink: $int;
-ms-flex: $int;
flex-shrink: $int;
}
// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width>
@mixin flex-basis($value: auto) {
-webkit-flex-basis: $value;
flex-basis: $value;
}
// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around
@mixin justify-content($value: flex-start) {
@if $value == flex-start {
-webkit-box-pack: start;
-moz-box-pack: start;
-ms-flex-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-moz-box-pack: end;
-ms-flex-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
} @else if $value == space-around {
-ms-flex-pack: distribute;
} @else {
-webkit-box-pack: $value;
-moz-box-pack: $value;
-ms-flex-pack: $value;
}
-webkit-justify-content: $value;
justify-content: $value;
}
// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch
@mixin align-content($value: stretch) {
// No Webkit Box Fallback.
-webkit-align-content: $value;
@if $value == flex-start {
-ms-flex-line-pack: start;
} @else if $value == flex-end {
-ms-flex-line-pack: end;
} @else {
-ms-flex-line-pack: $value;
}
align-content: $value;
}
// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
@mixin align-items($value: stretch) {
@if $value == flex-start {
-webkit-box-align: start;
-moz-box-align: start;
-ms-flex-align: start;
} @else if $value == flex-end {
-webkit-box-align: end;
-moz-box-align: end;
-ms-flex-align: end;
} @else {
-webkit-box-align: $value;
-moz-box-align: $value;
-ms-flex-align: $value;
}
-webkit-align-items: $value;
align-items: $value;
}
// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($value: auto) {
// No Webkit Box Fallback.
-webkit-align-self: $value;
@if $value == flex-start {
-ms-flex-item-align: start;
} @else if $value == flex-end {
-ms-flex-item-align: end;
} @else {
-ms-flex-item-align: $value;
}
align-self: $value;
}
@philiboua

This comment has been minimized.

Copy link

@philiboua philiboua commented Apr 6, 2017

awesome thanks a lot!

@DavidPurtskhvanidze

This comment has been minimized.

Copy link

@DavidPurtskhvanidze DavidPurtskhvanidze commented Apr 12, 2017

Thanks!

@kmassaro

This comment has been minimized.

Copy link

@kmassaro kmassaro commented Apr 16, 2017

Very nice!

@johnsontroye1

This comment has been minimized.

Copy link

@johnsontroye1 johnsontroye1 commented Jun 15, 2017

Thank you!

@zetareticoli

This comment has been minimized.

Copy link

@zetareticoli zetareticoli commented Jul 18, 2017

Supported browsers?

@PhilippeWorks

This comment has been minimized.

Copy link

@PhilippeWorks PhilippeWorks commented Sep 13, 2017

well done

@Dzordzu

This comment has been minimized.

@senpp

This comment has been minimized.

Copy link

@senpp senpp commented Oct 2, 2017

Thank you!

@jbanulso

This comment has been minimized.

Copy link

@jbanulso jbanulso commented Oct 25, 2017

I think for flex-grow it would be good to include the compatibility rule for IE11 -ms-flex-positive (source). What do you think?

@AbhishekThorat

This comment has been minimized.

Copy link

@AbhishekThorat AbhishekThorat commented Jan 21, 2018

Awesome and helpful gist. Thanks for sharing @richardtorres314
I have created the npm module for the same. (As I want to use this with a combination of reactjs and styled components)

Link to npm module: https://www.npmjs.com/package/flexbox-polyfills
Link to git repo: https://github.com/AbhishekThorat/flexbox-polyfills

Thanks once again!

@fatihTurkey

This comment has been minimized.

Copy link

@fatihTurkey fatihTurkey commented Sep 9, 2018

thanks awesome and its very helpful

@mytune1

This comment has been minimized.

Copy link

@mytune1 mytune1 commented Apr 23, 2019

Thank you. It is awesome.

@umairqazi523

This comment has been minimized.

Copy link

@umairqazi523 umairqazi523 commented May 27, 2019

Life is much easy now Thanks

@jamiehall87

This comment has been minimized.

Copy link

@jamiehall87 jamiehall87 commented Jul 2, 2019

Adding -ms-flex-align: $align; to @mixin align-items($align) adds align-items support in IE10

@richardtorres314

This comment has been minimized.

Copy link
Owner Author

@richardtorres314 richardtorres314 commented Jul 2, 2019

@jamiehall87 Added the line for IE10 support. Thank you!

@DumanTorbayev

This comment has been minimized.

Copy link

@DumanTorbayev DumanTorbayev commented Oct 26, 2019

Thank you. It is awesome!

@mqxu

This comment has been minimized.

Copy link

@mqxu mqxu commented Feb 8, 2020

Thank you. It is awesome!

@ltlBeBoy

This comment has been minimized.

Copy link

@ltlBeBoy ltlBeBoy commented Feb 24, 2020

Unfortunately the mixins have to be more complex, e.g. for flex-direction:

@mixin flex-direction($value: row) {
    @if $value == row-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-box-direction: reverse;
    -moz-box-orient: horizontal;
  } @else if $value == column {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
  } @else if $value == column-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-box-direction: reverse;
    -moz-box-orient: vertical;
  } @else {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
  }
  -webkit-flex-direction: $value;
  -ms-flex-direction: $value;
  flex-direction: $value;
}

Please take a look at the more complete mixins from the Mozilla web docs:
Cross-browser Flexbox mixins

@richardtorres314

This comment has been minimized.

Copy link
Owner Author

@richardtorres314 richardtorres314 commented Jul 14, 2020

@ltlBeBoy thanks for bringing to my attention. I've updated with the more complete versions of the mixins.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.