0.02
No commit activity in last 3 years
No release in over 3 years
A compass extension that provides variables & mixins for the latest (and final) Flexible Box Layout (flex-box) specification
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Runtime

>= 0
 Project Readme

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:

Installation

Install the Ruby Gem.

gem install compass-flexbox

Install into an existing project:

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

When creating a new project:

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

Usage

@import 'flexbox'

Configurable Variables

$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

Mixins

@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 ]

Demo

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