Skip to content

Instantly share code, notes, and snippets.

@Rudis1261
Created November 10, 2016 05:57
Show Gist options
  • Save Rudis1261/08cd5b142cf4fc097b09dfc03db6da0a to your computer and use it in GitHub Desktop.
Save Rudis1261/08cd5b142cf4fc097b09dfc03db6da0a to your computer and use it in GitHub Desktop.
A SCSS Flexbox Mixin, including IE10 logic
@mixin flex-direction($direction: row) {
-webkit-flex-direction: $direction;
-ms-flex-direction: $direction;
flex-direction: $direction;
}
@mixin flex-wrap($wrap: nowrap) {
@if $wrap == nowrap {
-ms-flex-wrap: none;
}
@else {
-ms-flex-wrap: $wrap;
}
-webkit-flex-wrap: $wrap;
flex-wrap: $wrap;
}
@mixin flex-order($order: 0) {
-ms-flex-order: $order;
-webkit-order: $order;
-ms-order: $order;
order: $order;
}
@mixin justify-content($justify: flex-start) {
@if $justify == flex-start {
-ms-flex-pack: start;
}
@else if $justify == flex-end {
-ms-flex-pack: end;
}
@elseif $justify == space-between {
-ms-flex-pack: justify;
}
@else {
-ms-flex-pack: $justify;
}
-webkit-justify-content: $justify;
-ms-justify-content: $justify;
justify-content: $justify;
}
@mixin align-items($align: auto) {
@if $align == flex-start {
-ms-flex-align: start;
}
@else if $align == flex-end {
-ms-flex-align: end;
}
@else {
-ms-flex-align: $align;
}
-webkit-align-items: $align;
-ms-align-items: $align;
align-items: $align;
}
@mixin align-content($align: auto) {
@if $align == flex-start {
-ms-flex-line-pack: start;
}
@else if $align == flex-end {
-ms-flex-line-pack: end;
}
@else {
-ms-flex-line-pack: $align;
}
-webkit-align-content: $align;
-ms-align-content: $align;
align-content: $align;
}
@mixin align-self($align: auto) {
@if $align == flex-start {
-ms-flex-item-align: start;
}
@else if $align == flex-end {
-ms-flex-item-align: end;
}
@else {
-ms-flex-item-align: $align;
}
-webkit-align-self: $align;
-ms-align-self: $align;
align-self: $align;
}
@mixin flex($value){
-webkit-box-flex: $value;
-moz-box-flex: $value;
-webkit-flex: $value;
-ms-flex: $value;
flex: $value;
}
@mixin flex-display($important: false){
@if ($important) {
display: -webkit-box!important;
display: -moz-box!important;
display: -ms-flexbox!important;
display: -webkit-flex!important;
display: flex!important;
}
@else {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
}
@Rudis1261
Copy link
Author

It makes use of the correct style properties as IE10's implementation of the flexbox spec at the time. As well as the correct properties where needed, notably the use of start and end instead of the current standard flex-start and flex-end.

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