Created
November 10, 2016 05:57
-
-
Save Rudis1261/08cd5b142cf4fc097b09dfc03db6da0a to your computer and use it in GitHub Desktop.
A SCSS Flexbox Mixin, including IE10 logic
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
andend
instead of the current standardflex-start
andflex-end
.