Skip to content

Easily generate flexbox layouts that support both new and legacy formats.

License

Notifications You must be signed in to change notification settings

ultimatedelman/sass-flexbox-mixin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 

Repository files navigation

Flexbox

Easily generate flexbox layouts that support both new and legacy formats.

  • Requires Compass
  • Requires Modernizr (for flexbox and flexboxlegacy feature detection)

Flexbox layouts consist of two main components: containers and children. In order to create a flexbox layout, you must first declare a container. Given the following HTML:

<div class="container">
  <div class="child">Content!</div>
  <div class="child">Content!</div>
  <div class="child">Content!</div>
  <div class="child">Content!</div>
</div>

you can turn this into a flexbox layout using this mixin like so:

.container {
  @include flexcontainer;
}
//direct children become flex items by default, use this only if values are different than defaults
.child {
  @include flexchild(...);
}

The mixin takes named arguments, so you can customize your layouts however you need:

.container {
  @include flexcontainer($flexdirection: column, $alignitems: flex-start);
}
.child {
  @include flexchild;
  &:nth-child(1) {
    @include flexprop(flex-basis, 200px); //helper mixin for single properties
  }
}

Let this mixin do all the hard work of remembering which IE properties and values translate into which standards-based property and what legacy property maps to which new properties!

About

Easily generate flexbox layouts that support both new and legacy formats.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages