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;
}
// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
@mixin flex-direction($direction) {
-webkit-flex-direction: $direction;
-moz-flex-direction: $direction;
-ms-flex-direction: $direction;
flex-direction: $direction;
}
// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
@mixin flex-wrap($wrap) {
-webkit-flex-wrap: $wrap;
-moz-flex-wrap: $wrap;
-ms-flex-wrap: $wrap;
flex-wrap: $wrap;
}
// Flex Direction and Wrap
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
@mixin flex-flow($flow) {
-webkit-flex-flow: $flow;
-moz-flex-flow: $flow;
-ms-flex-flow: $flow;
flex-flow: $flow;
}
// Display Order
// - applies to: flex items
// <integer>
@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
// Flex grow factor
// - applies to: flex items
// <number>
@mixin flex-grow($grow) {
-webkit-flex-grow: $grow;
-moz-flex-grow: $grow;
-ms-flex-grow: $grow;
flex-grow: $grow;
}
// Flex shrink
// - applies to: flex item shrink factor
// <number>
@mixin flex-shrink($shrink) {
-webkit-flex-shrink: $shrink;
-moz-flex-shrink: $shrink;
-ms-flex-shrink: $shrink;
flex-shrink: $shrink;
}
// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width>
@mixin flex-basis($width) {
-webkit-flex-basis: $width;
-moz-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
@mixin justify-content($justify) {
-webkit-justify-content: $justify;
-moz-justify-content: $justify;
-ms-justify-content: $justify;
justify-content: $justify;
-ms-flex-pack: $justify;
}
// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch
@mixin align-content($align) {
-webkit-align-content: $align;
-moz-align-content: $align;
-ms-align-content: $align;
align-content: $align;
}
// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
@mixin align-items($align) {
-webkit-align-items: $align;
-moz-align-items: $align;
-ms-align-items: $align;
-ms-flex-align: $align;
align-items: $align;
}
// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($align) {
-webkit-align-self: $align;
-moz-align-self: $align;
-ms-align-self: $align;
align-self: $align;
}
@philiboua

This comment has been minimized.

Copy link

commented Apr 6, 2017

awesome thanks a lot!

@DavidPurtskhvanidze

This comment has been minimized.

Copy link

commented Apr 12, 2017

Thanks!

@kmassaro

This comment has been minimized.

Copy link

commented Apr 16, 2017

Very nice!

@johnsontroye1

This comment has been minimized.

Copy link

commented Jun 15, 2017

Thank you!

@zetareticoli

This comment has been minimized.

Copy link

commented Jul 18, 2017

Supported browsers?

@PhilippeWorks

This comment has been minimized.

Copy link

commented Sep 13, 2017

well done

@Dzordzu

This comment has been minimized.

@senpp

This comment has been minimized.

Copy link

commented Oct 2, 2017

Thank you!

@jbanulso

This comment has been minimized.

Copy link

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

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

commented Sep 9, 2018

thanks awesome and its very helpful

@mytune1

This comment has been minimized.

Copy link

commented Apr 23, 2019

Thank you. It is awesome.

@umairqazi523

This comment has been minimized.

Copy link

commented May 27, 2019

Life is much easy now Thanks

@jamiehall87

This comment has been minimized.

Copy link

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

commented Jul 2, 2019

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

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.