This is a collection of Less mixins for CSS3 Flexbox.
Flexbox is supported, in one way or another, by all major browsers. Due to the changes in the spec over time, I've decided to only include support for the "New" Flexbox spec and not for the older "Legacy" spec.
Although Internet Explorer 10 uses different property names (for example, flex-pack instead of justify-content), its flexbox behavior is mostly the same as in other browsers. Also, IE10's alternate grammar doesn't include separate properties for flex-grow, flex-shrink, and flex-basis, so these mixins are not included in this collection.
You can use less-flexbox by importing it into your Less project. All standard mixins are enclosed in the #flexbox namespace, and all mixin helpers are in the ._flex namespace.
The benefit to using this method is that all properties are explicitly output, which may make in-browser debugging easier.
@import (reference) "flexbox";
.box {
// You can explicitly reference the namespace on each mixin call
#flexbox .display(flex);
#flexbox .align-items(center);
}
.flexy-box {
// Or you can call the namespace once and save some extra lines
#flexbox;
.display(inline-flex);
.direction(column);
}See Namespaces & Ancestors for more information on namespacing in Less.
The ._flex namespace includes many of the commonly-used property-value pairs available with flexbox. If you use a DRY approach, this method should be familiar.
@import (reference) "flexbox";
.box {
&:extend(
._flex .display--flex,
._flex .align-items--center
);
}This method works well when using Less in conjunction with Modernizr.
.box {
display: block;
.flexbox & { // .flexbox .box
&:extend(._flex .display--flex);
#flexbox .flex(1, 0, 50%);
}
}