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
Copy link

philiboua commented Apr 6, 2017

awesome thanks a lot!

@DavidPurtskhvanidze
Copy link

DavidPurtskhvanidze commented Apr 12, 2017

Thanks!

@kmassaro
Copy link

kmassaro commented Apr 16, 2017

Very nice!

@johnsontroye1
Copy link

johnsontroye1 commented Jun 15, 2017

Thank you!

@zetareticoli
Copy link

zetareticoli commented Jul 18, 2017

Supported browsers?

@PhilippeWorks
Copy link

PhilippeWorks commented Sep 13, 2017

well done

@Dzordzu
Copy link

Dzordzu commented Sep 24, 2017

@fuongz
Copy link

fuongz commented Oct 2, 2017

Thank you!

@jbanulso
Copy link

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
Copy link

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
Copy link

fatihTurkey commented Sep 9, 2018

thanks awesome and its very helpful

@mytune1
Copy link

mytune1 commented Apr 23, 2019

Thank you. It is awesome.

@umairqazi523
Copy link

umairqazi523 commented May 27, 2019

Life is much easy now Thanks

@jamiehall87
Copy link

jamiehall87 commented Jul 2, 2019

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

@richardtorres314
Copy link
Author

richardtorres314 commented Jul 2, 2019

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

@DumanTorbayev
Copy link

DumanTorbayev commented Oct 26, 2019

Thank you. It is awesome!

@mqxu
Copy link

mqxu commented Feb 8, 2020

Thank you. It is awesome!

@ltlBeBoy
Copy link

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
Copy link
Author

richardtorres314 commented Jul 14, 2020

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

@galhan
Copy link

galhan commented Jan 11, 2022

Thank you. It is awesome!

@richardtorres314
Copy link
Author

richardtorres314 commented Jan 11, 2022

@galhan You're welcome!

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