#quick-flex
##Mixin to add flexbox syntax with vendor prefixes
All the vendor prefixes and stuff are done for you. Just use @include flexbox to make something into a flexbox. Default values are set but you can change them if you want.
###Example SCSS:
.flexcontainer {
@include flexbox(row wrap);
}
###Output CSS:
.flexcontainer {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-align-content: flex-start;
align-content: flex-start;
}
###To install:
In your command line using Bower, run:
$ bower install quick-flex --save
Since this is Sass, you need to have Grunt-Sass, which you probably have already taken care of. Then, in your Gruntfile.js, add the path (the part in options):
sass: {
dist: {
files: {
'application.css': 'sass/application.scss'
},
options: {
includePaths: [
'./bower_components/quick-flex'
]
}
}
}
To use this mixin, add this to your Sass manifest:
@import "quick-flex";