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

philiboua commented Apr 6, 2017

awesome thanks a lot!

@DavidPurtskhvanidze

This comment has been minimized.

Copy link

DavidPurtskhvanidze commented Apr 12, 2017

Thanks!

@kmassaro

This comment has been minimized.

Copy link

kmassaro commented Apr 16, 2017

Very nice!

@johnsontroye1

This comment has been minimized.

Copy link

johnsontroye1 commented Jun 15, 2017

Thank you!

@zetareticoli

This comment has been minimized.

Copy link

zetareticoli commented Jul 18, 2017

Supported browsers?

@PhilippeWorks

This comment has been minimized.

Copy link

PhilippeWorks commented Sep 13, 2017

well done

@Dzordzu

This comment has been minimized.

@senpp

This comment has been minimized.

Copy link

senpp commented Oct 2, 2017

Thank you!

@jbanulso

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

fatihTurkey commented Sep 9, 2018

thanks awesome and its very helpful

@mytune1

This comment has been minimized.

Copy link

mytune1 commented Apr 23, 2019

Thank you. It is awesome.

@umairqazi523

This comment has been minimized.

Copy link

umairqazi523 commented May 27, 2019

Life is much easy now Thanks

@jamiehall87

This comment has been minimized.

Copy link

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 commented Jul 2, 2019

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

@DumanTorbayev

This comment has been minimized.

Copy link

DumanTorbayev commented Oct 26, 2019

Thank you. It is awesome!

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.