Compass Flexbox
This module provides prefixing support for the three versions of flexbox that have been implemented by browsers since 2009. However it does not attempt to provide a unified interface across these different versions.
- July 2009 Working Draft (box)
- March 2012 Working Draft (flexbox)
- September 2012 Candidate Recommendation (flex)
The flexbox property mixins will only prefix the properties according the spec version 3.
There are two ways to use this module. Per property mixins or by passing a map of properties to the generic flexbox module.
Per-property mixins
The per-property mixins only work with browsers implementing the most recent (3rd) version of the spec. If you want to support the legacy browsers, you will need to use the generic flexbox mixin.
Example:
.row {
@include display-flex;
@include flex-direction(row);
}
Generic Flexbox Mixin
By default the flexbox mixin assumes it is applying prefixes for spec version 3 which will also
output the unprefixed property. However the $version argument allows for prefixing according to the
previous versions of the spec.
Example:
.row {
@include flexbox((
display: box,
box-orient: vertical
), $version: 1);
@include flexbox((
display: flexbox,
flex-direction: row
), $version: 2);
@include flexbox((
display: flex,
flex-direction: row
));
}
This file can be imported using:
@import "compass/css3/flexbox"
Examples
- CSS3 Flexible Box
- unified mixins for the CSS3 flexible box
Imports
- Browser Support – Provides configuration options for the Compass Browser Support Matrix.
Configurable Variables help
$flexbox-support-threshold
$critical-usage-threshold
Mixins
view sourceflexbox($properties, $version)
=flexbox($properties, $version: null)
$capability-options: $flexbox-capability-options
@if $version
$capability-options: (partial-support: true, spec-versions: $version)
+with-each-prefix(flexbox, $flexbox-support-threshold, $capability-options)
// Don't output unprefixed versions when the spec version is not the final version
@if $version and $current-prefix or not $version or $version == 3
@each $prop, $value in $properties
@if $prop == display
display: prefix-identifier($value)
@else
+prefix-prop($prop, $value)
@mixin flexbox($properties, $version: null) {
$capability-options: $flexbox-capability-options;
@if $version {
$capability-options: (partial-support: true, spec-versions: $version);
}
@include with-each-prefix(flexbox, $flexbox-support-threshold, $capability-options) {
// Don't output unprefixed versions when the spec version is not the final version
@if $version and $current-prefix or not $version or $version == 3 {
@each $prop, $value in $properties {
@if $prop == display {
display: prefix-identifier($value);
}
@else {
@include prefix-prop($prop, $value);
}
}
}
}
}
This is the underlying implementation for all the other mixins in this module. It is the only way to access prefix support for older versions of the spec.
$properties: map of property-value pairs that should be prefixed
`$version1: the version of the spec to use when considering what prefix
to appply. Defaults to the most recent (spec version 3). Only the most
recent version of the spec outputs an unprefixed version.
display-flex($display)
=display-flex($display: flex) +flexbox((display: $display))
@mixin display-flex($display: flex) {
@include flexbox((display: $display));
}
Values for $display are: flex (default), inline-flex
flex-direction($direction)
=flex-direction($direction) +flexbox((flex-direction: $direction))
@mixin flex-direction($direction) {
@include flexbox((flex-direction: $direction));
}
Values: row | row-reverse | column | column-reverse
flex-wrap($wrap)
=flex-wrap($wrap) +flexbox((flex-wrap: $wrap))
@mixin flex-wrap($wrap) {
@include flexbox((flex-wrap: $wrap));
}
Values: nowrap | wrap | wrap-reverse
flex-flow($flow)
=flex-flow($flow) +flexbox((flex-flow: $flow))
@mixin flex-flow($flow) {
@include flexbox((flex-flow: $flow));
}
Shorthand for flex-direction and flex-wrap.
order($order)
=order($order) +flexbox((order: $order))
@mixin order($order) {
@include flexbox((order: $order));
}
Accepts an integer
flex($flex)
=flex($flex) +flexbox((flex: $flex))
@mixin flex($flex) {
@include flexbox((flex: $flex));
}
Shorthand for flex-grow, flex-shrink and optionally flex-basis. Space separated, in that order.
flex-grow($flex-grow)
=flex-grow($flex-grow) +flexbox((flex-grow: $flex-grow))
@mixin flex-grow($flex-grow) {
@include flexbox((flex-grow: $flex-grow));
}
Accepts a number.
flex-shrink($flex-shrink)
=flex-shrink($flex-shrink) +flexbox((flex-shrink: $flex-shrink))
@mixin flex-shrink($flex-shrink) {
@include flexbox((flex-shrink: $flex-shrink));
}
Accepts a number.
flex-basis($flex-basis)
=flex-basis($flex-basis) +flexbox((flex-basis: $flex-basis))
@mixin flex-basis($flex-basis) {
@include flexbox((flex-basis: $flex-basis));
}
Accepts any legal value for the width property.
justify-content($justify-content)
=justify-content($justify-content) +flexbox((justify-content: $justify-content))
@mixin justify-content($justify-content) {
@include flexbox((justify-content: $justify-content));
}
Legal values: flex-start | flex-end | center | space-between | space-around
align-items($align-items)
=align-items($align-items) +flexbox((align-items: $align-items))
@mixin align-items($align-items) {
@include flexbox((align-items: $align-items));
}
Legal values: flex-start | flex-end | center | baseline | stretch
align-self($align-self)
=align-self($align-self) +flexbox((align-self: $align-self))
@mixin align-self($align-self) {
@include flexbox((align-self: $align-self));
}
Legal values: auto | flex-start | flex-end | center | baseline | stretch
align-content($align-content)
=align-content($align-content) +flexbox((align-content: $align-content))
@mixin align-content($align-content) {
@include flexbox((align-content: $align-content));
}
Legal values: flex-start | flex-end | center | space-between | space-around | stretch