Skip to content

Instantly share code, notes, and snippets.

@e-river

e-river/_flexbox.scss

Last active Dec 29, 2015
Embed
What would you like to do?
Mixin of Sass with Compass for Flexbox supported new syntax and older syntax. If you use this Mixin, Compass is necessity.
@mixin display-flex() {
@include display-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
// flex-direction property
// This Argument is same as W3C Flexbox.
// See below:
// http://www.w3.org/TR/css3-flexbox/#flex-direction-property
// 'box-direction' and 'box-orient' is Mixin of Compass
@mixin flex-direction($direction) {
$row: row;
$row-reverse: row-reverse;
$column: column;
$column-reverse: column-reverse;
@if $direction == row {
@include box-direction(normal);
@include box-orient(horizontal);
-webkit-flex-direction: $row;
-ms-flex-direction: $row;
flex-direction: $row;
} @else if $direction == row-reverse {
@include box-direction(reverse);
@include box-orient(horizontal);
-webkit-flex-direction: $row-reverse;
-ms-flex-direction: $row-reverse;
flex-direction: $row-reverse;
} @else if $direction == column {
@include box-direction(normal);
@include box-orient(vertical);
-webkit-flex-direction: $column;
-ms-flex-direction: $column;
flex-direction: $column;
} @else if $direction == column-reverse {
@include box-direction(reverse);
@include box-orient(vertical);
-webkit-flex-direction: $column-reverse;
-ms-flex-direction: $column-reverse;
flex-direction: $column-reverse;
}
}
// align-items properties
// This Argument is same as W3C Flexbox.
// See below:
// http://www.w3.org/TR/css3-flexbox/#align-items-property
@mixin align-items($align){
$flex-align: "";
$box-align: "";
@if $align == "center" {
$flex-align: center;
$box-align: center;
} @else if $align == "flex-start" {
$flex-align: flex-start;
$box-align: start;
} @else if $align == "flex-end" {
$flex-align: flex-end;
$box-align: end;
} @else if $align == "baseline" {
$flex-align: baseline;
$box-align: baseline;
} @else if $align == "stretch" {
$flex-align: stretch;
$box-align: stretch;
}
-webkit-box-align: $box-align;
-moz-box-align: $box-align;
-ms-flex-align: $box-align;
-webkit-align-items: $flex-align;
align-items: $flex-align;
}
// justify-content property
// This Argument is same as W3C Flexbox.
// See below:
// http://www.w3.org/TR/css3-flexbox/#justify-content-property
@mixin justify-content($pack) {
$flex-content: "";
$flex-pac: "";
$flex-ms-pack: "";
@if $pack == "center" {
$flex-content: center;
$flex-ms-pack: center;
$flex-pac: center;
} @else if $pack == "flex-start" {
$flex-content: flex-start;
$flex-ms-pack: start;
$flex-pac: start;
} @else if $pack == "flex-end" {
$flex-content: flex-end;
$flex-ms-pack: end;
$flex-pac: end;
} @else if $pack == "space-between" {
$flex-content: space-between;
$flex-ms-pack: justify;
$flex-pac: justify;
} @else if $pack == "space-around" {
$flex-content: space-around;
$flex-ms-pack: distribute;
$flex-pac: justify;
}
-webkit-box-pack: $flex-pac;
-moz-box-pack: $flex-pac;
-ms-flex-pack: $flex-ms-pack;
-webkit-justify-content: $flex-content;
justify-content: $flex-content;
}
// flex-wrap property
// This Argument is same as W3C Flexbox.
// See below:
// http://www.w3.org/TR/css3-flexbox/#flex-wrap-property
@mixin flex-wrap($wrap) {
-webkit-flex-wrap: $wrap;
-ms-flex-wrap: $wrap;
flex-wrap: $wrap;
}
// align-content property
// This Argument is same as W3C Flexbox.
// See below:
// http://www.w3.org/TR/css3-flexbox/#align-content-property
@mixin align-content($line) {
-webkit-align-content: $line;
-ms-flex-line-pack: $line;
align-content: $line;
}
// order property for flex items
// This Argument is same as W3C Flexbox.
// See below:
// http://www.w3.org/TR/css3-flexbox/#order-property
@mixin order($num) {
-webkit-box-ordinal-group: $num + 1;
-moz-box-ordinal-group: $num + 1;
-webkit-order: $num;
-ms-flex-order: $num;
order: $num;
}
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.