[DEPRECATED] compass-flexbox

Use Autoprefixer and Browserslist instead of compass-flexbox for better and up to date results

A collection of Compass mixins providing the best possible browser support for the CSS Flexible Box Layout Module.

Test page

Installation

Download from this repository and import _flexbox.scss in your sass file after importing Compass.

@import
    'compass',
    'path-to/flexbox';

Naming

All mixins are named according to the current spec and prefixed with an 'x-', e.g. @include x-display('flex'). The former is to get used to the offical property and value names. The latter clearly indicates these mixins are custom and also avoids any current or future naming collisions with other frameworks.

Mixins

Flex container

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Flex item

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

Display

Test page

Flex

Example:

.flex-container {
    @include x-display('flex');
}

returns:

.flex-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Browser support:

• IE 10+
• ¹ Firefox 3.6+
• Chrome 4+
• Safari 3.1+
• Opera 12.1+
• iOS Safari 3.2+
• ~~Opera Mini~~
• Android 2.1+
• Opera Mobile 12.1+
• Blackberry 7+
• IE Mobile 10

Notes:

1. Firefox 19- treats flex-containers as inline-block elements. Explicitly set width: 100%; to counter this.

Flex-inline

Example:

.flex-container {
    @include x-display('inline-flex');
}

returns:

.flex-container {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}

Browser support:

• IE 10+
• Firefox 22+
• Chrome 21+
• Safari 6.1+
• Opera 12.1+
• iOS Safari 7
• ~~Opera Mini~~
• ~~Android~~
• Opera Mobile 12.1+
• Blackberry 10
• IE Mobile 10

Flex-direction

Test page

Example:

.flex-container {
    @include x-flex-direction('row');
}

returns:

.flex-container {
        -webkit-box-orient: horizontal;
           -moz-box-orient: horizontal;
     -webkit-box-direction: normal;
        -moz-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
}

Browser support:

• IE 10+
• Firefox 3.6+
• Chrome 4+
• Safari 3.1+
• Opera 12.1+
• iOS Safari 3.2+
• ~~Opera Mini~~
• Android 2.1+
• Opera Mobile 12.1+
• Blackberry 7+
• IE Mobile 10

Flex-wrap

Test page

Example:

.flex-container {
    @include x-flex-wrap('wrap');
}

returns:

.flex-container {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

Browser support:

• ¹ IE 10+
• ~~Firefox~~
• Chrome 21+
• Safari 6.1+
• Opera 12.1+
• iOS Safari 7
• ~~Opera Mini~~
• ~~Android~~
• Opera Mobile 12.1+
• Blackberry 10
• ¹ IE Mobile 10

Notes:

1. In IE10+ flex-wrap doesn't work combined with flex-direction: column

Flex-flow

Test page

Example:

.flex-container {
    @include x-flex-flow('column nowrap');
}

returns:

.flex-container {
    -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
}

Browser support:

• ¹ IE 10+
• ~~Firefox~~
• Chrome 21+
• Safari 6.1+
• Opera 12.1+
• iOS Safari 7
• ~~Opera Mini~~
• ~~Android~~
• Opera Mobile 12.1+
• Blackberry 10
• ¹ IE Mobile 10

Notes:

1. In IE10+ flex-flow doesn't work when the direction is column

Justify-content

Test page

Example:

.flex-container {
    @include x-justify-content('flex-start');
}

returns:

.flex-container {
           -webkit-box-pack: start;
              -moz-box-pack: start;
              -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
            justify-content: flex-start;
}

Browser support:

• IE 10+
• ¹ Firefox 3.6+
• ¹ Chrome 4+
• ¹ Safari 3.1+
• Opera 12.1+
• ¹ iOS Safari 3.2+
• ~~Opera Mini~~
• ¹ Android 2.1+
• Opera Mobile 12.1+
• ¹ Blackberry 7+
• IE Mobile 10

Notes:

1. No support for the space-around value. Firefox 22+, Chrome 21+, Safari 6.1+, iOS Safari 7 and Blackberry 10 have full support.

Align-items

Test page

Example:

.flex-container {
    @include x-align-items('flex-start');
}

returns:

.flex-container {
      -webkit-box-align: start;
         -moz-box-align: start;
         -ms-flex-align: start;
    -webkit-align-items: flex-start;
            align-items: flex-start;
}

Browser support:

• IE 10+
• Firefox 3.6+
• Chrome 4+
• Safari 3.1+
• Opera 12.1+
• iOS Safari 3.2+
• ~~Opera Mini~~
• Android 2.1+
• Opera Mobile 12.1+
• Blackberry 7+
• IE Mobile 10

Align content

Test page

Example:

.flex-container {
    @include x-align-content('flex-start');
}

returns:

.flex-container {
       -ms-flex-lign-pack: start;
    -webkit-align-content: flex-start;
            align-content: flex-start;
}

Browser support:

• IE 10+
• Firefox 22+
• Chrome 21+
• Safari 6.1+
• Opera 12.1+
• iOS Safari 7
• ~~Opera Mini~~
• ~~Android~~
• Opera Mobile 12.1+
• Blackberry 10
• IE Mobile 10

Order

Test page

Example:

.flex-item {
    @include x-order(2);
}

returns:

.flex-item {
    -webkit-box-ordinal-group: 2;
       -moz-box-ordinal-group: 2;
               -ms-flex-order: 2;
                -webkit-order: 2;
                        order: 2;
}

Browser support:

• IE 10+
• Firefox 3.6+
• Chrome 4+
• Safari 3.1+
• Opera 12.1+
• iOS Safari 3.2+
• ~~Opera Mini~~
• Android 2.1+
• Opera Mobile 12.1+
• Blackberry 7+
• IE Mobile 10

Flex-grow

Test page

Example:

.flex-item {
    @include x-flex-grow(2);
}

returns:

.flex-item {
     -webkit-box-flex: 2;
        -moz-box-flex: 2;
    -webkit-flex-grow: 2;
        -ms-flex-grow: 2;
            flex-grow: 2;
}

Browser support:

• IE 10+
• Firefox 3.6+
• Chrome 4+
• Safari 3.1+
• Opera 12.1+
• iOS Safari 3.2+
• ~~Opera Mini~~
• Android 2.1+
• Opera Mobile 12.1+
• Blackberry 7+
• IE Mobile 10

Flex-shrink

Test page

Example:

.flex-item {
    @include x-flex-shrink(2);
}

returns:

.flex-item {
      -ms-flex-negative: 2;
    -webkit-flex-shrink: 2;
            flex-shrink: 2;
}

Browser support:

• ¹ IE 10+
• Firefox 22+
• Chrome 21+
• Safari 6.1+
• Opera 12.1+
• iOS Safari 7
• ~~Opera Mini~~
• ~~Android~~
• Opera Mobile 12.1+
• Blackberry 10
• ¹ IE Mobile 10

Notes:

1. In order for flex-shrink to work in IE10+ you have to explicitly declare a flex-shrink value for all other flex items (usually you would set the value to 1).

Flex-basis

Test page

Example:

.flex-item {
    @include x-flex-basis(200px);
}

returns:

.flex-item {
    -ms-flex-preferred-size: 200px;
         -webkit-flex-basis: 200px;
                 flex-basis: 200px;
}

Browser support:

• IE 10+
• Firefox 22+
• Chrome 21+
• Safari 6.1+
• Opera 12.1+
• iOS Safari 7
• ~~Opera Mini~~
• ~~Android~~
• Opera Mobile 12.1+
• Blackberry 10
• IE Mobile 10

Flex

Test page

Example:

.flex-item {
    @include x-flex(1 1 200px);
}

returns:

.flex-item {
    -webkit-flex: 1 1 200px;
        -ms-flex: 1 1 200px;
            flex: 1 1 200px;
}

Browser support:

• IE 10+
• Firefox 22+
• Chrome 21+
• Safari 6.1+
• Opera 12.1+
• iOS Safari 7
• ~~Opera Mini~~
• ~~Android~~
• Opera Mobile 12.1+
• Blackberry 10
• IE Mobile 10

Align-self

Test page

Example:

.flex-item {
    @include x-align-self('flex-start');
}

returns:

.flex-item {
    -ms-flex-item-align: 'start';
     -webkit-align-self: 'flex-start';
             align-self: 'flex-start';
}

Browser support:

• ~~IE~~
• Firefox 22+
• Chrome 21+
• Safari 6.1+
• Opera 12.1+
• iOS Safari 7
• ~~Opera Mini~~
• ~~Android~~
• Opera Mobile 12.1+
• Blackberry 10
• ~~IE Mobile~~

Tested on

• Mac OS 10.8.5

  • Chrome 30
  • Firefox 24
  • Safari 6.1
  • Opera 12.16

• Windows XP

  • Firefox 3.6
  • Safari 3.2

• Windows 7

  • IE 9

• Windows 8

  • IE 10

• Windows 8.1

  • IE 11

• iOS 7 (iPad 3)

  • iOS Safari 7
  • Chrome 30
  • Opera Mini 7

• iOS 7 (iPhone 4S)

  • iOS Safari 7
  • Chrome 30

• iOS 5.1 (iPad 1)

  • iOS Safari 5.1
  • Chrome 28

• Android 4.0 (Alcatel One touch X'Pop)

  • Stock browser
  • Chrome 29
  • Opera Mobile 16

• Android 2.3 (Samsung GT-S5660 Galaxy Gio)

  • Stock browser

All other tests were conducted on Browserstack, Saucelabs or simulators/emulators.

Further browsing

• Using Flexbox: Mixing Old and New for the Best Browser Support
• Caniuse
• Flexyboxes
• Solved by Flexbox
• Learn you a flexbox