Q
Version: 0.12.1
Source on Github

Compass Box

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

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

Examples

CSS3 Flexible Box
mixins for the CSS3 flexible box

Imports

  1. Shared Utilities

Configurable Variables help

horizontal

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

stretch

Default box-align

0

Default box flex

1

Default flex group

1

default for ordinal group

normal

Box direction default value

single

default for box lines

start

default for box pack

Mixins

view source 

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

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

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

view source 

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

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

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

view source 

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

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

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

view source 

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

@mixin box-flex($flex: $default-box-flex) {
  @include experimental(box-flex, $flex, -moz, -webkit, not -o, -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 

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

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

mixin which takes an int argument for flexible grouping

view source 

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

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

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

view source 

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

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

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

view source 

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

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

mixin for box lines [ single | multiple ]

view source 

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

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

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