Using Compass' Flexbox Module

At Will Hall Online, we love Sass for making our CSS more powerful and streamlined. And we love CSS3 Flexbox for enabling us to create responsive layouts quickly and easily.

But until recently, we’d found using the two of them together relatively difficult, because Flexbox requires numerous prefixes to work on as many browsers as possible, and there are a lot of Flexbox related properties, so to write mixins for all of them would take ages.

Step forward Compass, and in particular its Flexbox module. The module provides a general Flexbox mixin with three different versions, one for each version of the flexbox spec (box, flexbox and the latest, flex). The mixin defaults to version 3, the latest, which is why the third mixin for both the container and the flex item has no version specified.

To use it, import the module:

@import "compass/css3/flexbox";

Include each version of the mixin for the container, using the same properties as you would for the latest version of the spec inside the mixin:

.flex-container {
    @include flexbox((
        display: box,
        box-orient: vertical,
        justify-content: space-between,
        flex-wrap: wrap
    ), $version: 1);
    @include flexbox((
        display: flexbox,
        flex-direction: row,
        justify-content: space-between,
        flex-wrap: wrap
    ), $version: 2);
    @include flexbox((
        display: flex,
        flex-direction: row,
        justify-content: space-between,
        flex-wrap: wrap
    ));
}

Include each version of the mixin for the flex items, again using the latest properties:

.flex-item {
    display: inline-block;
    float: left;
    @include flexbox((
        flex: 1 0 auto
    ), $version: 1);
    @include flexbox((
        flex: 1 0 auto
    ), $version: 2);
    @include flexbox((
        flex: 1 0 auto
    )); 
}

And hey presto, fully prefixed flexbox CSS code, which should work on most versions of Chrome, Firefox and Safari currently in use, as well as IE10 and 11. We suggest setting the items to display as inline-block and floating them to the left to achieve a reasonable degradation to IE8 and 9.