Compass Box

This module provides mixins that pertain to the CSS3 Flexible Box.

This file can be imported using: @import "compass/css3/box"

View the Source for this module on Github.

Examples

CSS3 Flexible Box
mixins for the CSS3 flexible box

Imports

The following sass files are automatically imported when you import this file:

  1. CSS3 Utilities

Configurable Variables help

Value
horizontal
Description

Default box orientation, assuming that the user wants something less block-like

Value
stretch
Description

Default box-align

Value
0
Description

Default box flex

Value
1
Description

Default flex group

Value
1
Description

default for ordinal group

Value
normal
Description

Box direction default value

Value
single
Description

default for box lines

Value
start
Description

default for box pack

Mixins

View Source: Sass | SCSS 

=display-box
  +experimental-value(display, box, -moz, -webkit, not -o, not -ms, not -khtml, official)

@mixin display-box {
  @include experimental-value(display, box, -moz, -webkit, not -o, not -ms, not -khtml, official); }

display:box; must be used for any of the other flexbox mixins to work properly

View Source: Sass | SCSS 

=box-orient($orientation: $default-box-orient)
  $orientation: unquote($orientation)
  +experimental(box-orient, $orientation, -moz, -webkit, not -o, not -ms, not -khtml, official)

@mixin box-orient($orientation: $default-box-orient) {
  $orientation: unquote($orientation);
  @include experimental(box-orient, $orientation, -moz, -webkit, not -o, not -ms, not -khtml, official); }

Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ]

View Source: Sass | SCSS 

=box-align($alignment: $default-box-align)
  $alignment: unquote($alignment)
  +experimental(box-align, $alignment, -moz, -webkit, not -o, not -ms, not -khtml, official)

@mixin box-align($alignment: $default-box-align) {
  $alignment: unquote($alignment);
  @include experimental(box-align, $alignment, -moz, -webkit, not -o, not -ms, not -khtml, official); }

Box align [ start | end | center | baseline | stretch ]

View Source: Sass | SCSS 

=box-flex($flex: $default-box-flex)
  +experimental(box-flex, $flex, -moz, -webkit, not -o, not -ms, not -khtml, official)

@mixin box-flex($flex: $default-box-flex) {
  @include experimental(box-flex, $flex, -moz, -webkit, not -o, not -ms, not -khtml, official); }

mixin which takes an int argument for box flex. Apply this to the children inside the box.

For example: “div.display-box > div.child-box” would get the box flex mixin.

View Source: Sass | SCSS 

=box-flex-group($group: $default-box-flex-group)
  +experimental(box-flex-group, $group, -moz, -webkit, not -o, not -ms, not -khtml, official)

@mixin box-flex-group($group: $default-box-flex-group) {
  @include experimental(box-flex-group, $group, -moz, -webkit, not -o, not -ms, not -khtml, official); }

mixin which takes an int argument for flexible grouping

View Source: Sass | SCSS 

=box-ordinal-group($group: $default-ordinal-flex-group)
  +experimental(box-ordinal-group, $group, -moz, -webkit, not -o, not -ms, not -khtml, official)

@mixin box-ordinal-group($group: $default-ordinal-flex-group) {
  @include experimental(box-ordinal-group, $group, -moz, -webkit, not -o, not -ms, not -khtml, official); }

mixin which takes an int argument for ordinal grouping and rearranging the order

View Source: Sass | SCSS 

=box-direction($direction: $default-box-direction)
  $direction: unquote($direction)
  +experimental(box-direction, $direction, -moz, -webkit, not -o, not -ms, not -khtml, official)

@mixin box-direction($direction: $default-box-direction) {
  $direction: unquote($direction);
  @include experimental(box-direction, $direction, -moz, -webkit, not -o, not -ms, not -khtml, official); }

mixin for box-direction [ normal | reverse | inherit ]

View Source: Sass | SCSS 

=box-lines($lines: $default-box-lines)
  $lines: unquote($lines)
  +experimental(box-lines, $lines, -moz, -webkit, not -o, not -ms, not -khtml, official)

@mixin box-lines($lines: $default-box-lines) {
  $lines: unquote($lines);
  @include experimental(box-lines, $lines, -moz, -webkit, not -o, not -ms, not -khtml, official); }

mixin for box lines [ single | multiple ]

View Source: Sass | SCSS 

=box-pack($pack: $default-box-pack)
  $pack: unquote($pack)
  +experimental(box-pack, $pack, -moz, -webkit, not -o, not -ms, not -khtml, official)

@mixin box-pack($pack: $default-box-pack) {
  $pack: unquote($pack);
  @include experimental(box-pack, $pack, -moz, -webkit, not -o, not -ms, not -khtml, official); }

mixin for box pack [ start | end | center | justify ]