quick-flex

Mixin for flexbox containers


License
MIT
Install
bower install quick-flex

Documentation

#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";