Compass Flexbox

This extension is deprecated! Version 1.0 of Compass includes much-improved flexbox support. I don't plan to continue support for this extension after Compass 1.0 is officially released.

Wading through the morass of different flexbox implementations is an exhausting process. In most cases, both the properties and values are different in each syntax. It can be tempting to just say "screw it" and only build with the latest version of flexbox, but without the old implementations, flexbox support isn't broad enough for use on sites that aren't made for - well - people like you and me. This Compass extension provides mixins for latest flexbox syntax, and automatically translates to the "ie" and "legacy" syntaxes when possible.

Warnings are generated in the console when using a property that is incompatible with the older versions of Flexbox, or when a specific browser has a buggy implementation of a certain property/value combination. If you find the warnings annoying, you can turn them off with the --quiet command-line option or the :quiet Sass option, or set the $flexbox-display-warnings variable to false.

For information on Flexbox in general, see these articles:

• Solved by Flexbox
• Smashing Magazine: Designing CSS Layouts With Flexbox Is As Easy As Pie
• MDN: Using CSS flexible boxes
• Flexy Boxes: flexbox playground and code generator

gem install compass-flexbox

Edit the project configuration file (config.rb) and add:

require 'compass-flexbox'

Then run this command from the root of your project:

compass install compass-flexbox

compass create my_project -r compass-flexbox --using compass-flexbox

By default, the extension doesn't add any files to your project. An example scss and html file can be imported by installing the "example" pattern:

compass install compass-flexbox/example

@import 'flexbox'

$flexbox-display-warnings: true

Toggles display of warnings when using flexbox properties with inconsistent or buggy implementations.

$default-justify-content: flex-start

Alignment of items along the main flexbox axis

$default-align-items: stretch

Alignment of items along the cross-axis

$default-align-self: stretch

Override to align individual items along the cross-axis

$default-align-content: stretch

Alignment of flex lines along the cross-axis

$default-order: 1

Order of flex items

$default-flex: 1

How the size of items flex

$default-flex-grow: $default-flex

The flex grow factor of a flex item

$default-flex-shrink: $default-flex

The flex shrink factor of a flex item

$default-flex-basis: $default-flex

The initial main size of a flex item

$default-flex-direction: row

The direction of the main flexbox axis

$default-flex-wrap: nowrap

If and how flex items wrap along the cross-axis

$default-flex-flow: $default-flex-direction $default-flex-wrap

Shorthand for flex-direction and flex-wrap

@include display-flex

Defines the element as a block-level flex container and its children as flex items.

@include display-inline-flex

Defines the element as an atomic inline-level flex container and its children as flex items.

@include justify-content($justification)

Specifies alignment of items along the main flexbox axis. [ flex-start | center | flex-end | space-between | space-around ]

@include align-items($alignment)

Specifies alignment of items along the cross-axis. [ flex-start | center | flex-end | baseline | stretch ]

@include align-self($alignment)

Individual flex item alignment along the cross-axis. [ flex-start | center | flex-end | baseline | stretch ]

@include align-content($alignment)

Specifies alignment of flex lines along the cross-axis. Only takes effect when there are multiple flex lines. [ flex-start | center | flex-end | space-between | space-around | stretch ]

@include order($order)

Specifies the order of flex items. [ integer ]

@include flex($amount)

Specifies how the size of items flex. Shorthand for flex-grow, flex-shrink, and flex-basis. [ none | flex-grow flex-shrink? || flex-basis ]

@include flex-grow($amount)

Specifies the flex grow factor of a flex item. [ integer ]

@include flex-shrink($amount)

Specifies the flex shrink factor of a flex item. [ integer ]

@include flex-basis($amount)

Specifies the flex basis. (The initial main size of a flex item.) [ width ]

@include flex-direction($direction)

Specifies the direction of the main flexbox axis. [ row | row-reverse | column | column-reverse ]

@include flex-wrap($wrap)

Specifies if and how flex items wrap along the cross-axis. [ nowrap | wrap | wrap-reverse ]

@include flex-flow($flow)

Shorthand for flex-direction and flex-wrap. [ flex-direction flex-wrap ]

Examples of common problems that can be solved with flexbox: http://timhettler.github.io/compass-flexbox/