Flexbox / Flexible Box Layout CSS Reference

Browser Support

Chrome 4.0+, Firefox 2.0+, Safari 1.1+ including all versions of Safari on iOS support flexbox using the July 2009 working draft syntax. These browsers require prefixed flexbox property names. Chrome and Safari 3.0+ (including iOS) require the -webkit- prefix, Firefox requires the -moz- prefix, and Safari 1.1 and 2.0 require the -khtml- prefix.

Internet Explorer 10 supports flexbox using the March 2012 working draft syntax using -ms- prefixed property names.

Chrome 21+, Firefox 20+, WebKit Nightly, and Opera 12.1+ support flexbox using the September 2012 candidate recommendation syntax. Chrome and WebKit Nightly require the-webkit- prefix. Firefox and Opera support the un-prefixed property names.


Known Issues

According to Oli Studholme and Pete Boere, there are known issues with several major web browsers and their implementation of flexbox. For example, on Firefox 19.0 and earlier, both percentage widths set on flex items and overflow: hidden are ignored, resulting in the flexbox child expanding when content is larger than the child's set width. Because of these two issues, I've excluded Firefox 19 and earlier from using flexbox with the ptb/flexgrid framework.


Flex Containers

Flexible boxes, also called flex containers, are created by setting the display property on a container element. Properties are listed here in a specific order with the working draft syntaxes first and the current candidate recommendation standard syntax last.

display: -webkit-box | -webkit-inline-box
display: -moz-box | -moz-inline-box
display: -ms-flexbox | -ms-inline-flexbox
display: -webkit-flex | -webkit-inline-flex
display: flex | inline-flex

Main Axis Orientation and Direction

These properties specify how items are placed in the container, by setting the orientation and direction of the container's main axis.

-webkit-box-orient: block-axis | horizontal | inline-axis | vertical
-webkit-box-direction: normal | reverse
-moz-box-orient: block-axis | horizontal | inline-axis | vertical
-moz-box-direction: normal | reverse
-ms-flex-direction: column | column-reverse | row | row-reverse
-webkit-flex-direction: column | column-reverse | row | row-reverse
flex-direction: column | column-reverse | row | row-reverse

Single- or Multi-Line and Cross Axis Direction

These properties control whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

-webkit-box-lines: multiple | single
-moz-box-lines: multiple | single
-ms-flex-wrap: none | wrap | wrap-reverse
-webkit-flex-wrap: nowrap | wrap | wrap-reverse
flex-wrap: nowrap | wrap | wrap-reverse

Direction and Wrap Shorthand Property

The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the main and cross axes.

-ms-flex-flow: <-ms-flex-direction> || <-ms-flex-wrap>
-webkit-flex-flow: <flex-direction> || <flex-wrap>
flex-flow: <flex-direction> || <flex-wrap>

Change Display Order

Flexbox items are, by default, displayed and laid out in the same order as they appear in the source document. These properties may be used to change this ordering.

-webkit-box-ordinal-group: 1 | <positive integer>
-moz-box-ordinal-group: 1 | <positive integer>
-ms-flex-order: 0 | <integer>
-webkit-order: 0 | <integer>
order: 0 | <integer>

Flexibility

The defining aspect of flex layout is the ability to make the flex items "flex", altering their width or height to fill the available space. This is done with these properties. A flex container distributes free space to its items proportional to their flex-grow factor, or shrinks them to prevent overflow proportional to their flex-shrink factor.

-webkit-box-flex: 0.0 | <positive floating-point number>
-moz-box-flex: 0.0 | <positive floating-point number>
-ms-flex: none (0 0 auto) |
  [ [ <positive-flex: 1> <negative-flex: 0> ? ] || <preferred-size: 0px> ]
-webkit-flex-grow: 0 | <positive number>
-webkit-flex-shrink: 1 | <positive number>
-webkit-flex-basis: auto | <positive length>
-webkit-flex: none (0 0 auto) | initial (0 1 auto) | auto (1 1 auto) |
  [ <flex-grow: 1> <flex-shrink: 1> ? || <flex-basis: 0> ]
flex-grow: 0 | <positive number>
flex-shrink: 1 | <positive number>
flex-basis: auto | <positive length>
flex: none (0 0 auto) | initial (0 1 auto) | auto (1 1 auto) |
  [ <flex-grow: 1> <flex-shrink: 1> ? || <flex-basis: 0> ]

Main Axis Alignment and Extra Space Distribution

These properties align flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved.

-webkit-box-pack: center | end | justify | start
-moz-box-pack: center | end | justify | start
-ms-flex-pack: center | end | justify | start
-webkit-justify-content: center | flex-end |
  flex-start | space-around | space-between
justify-content: center | flex-end |
  flex-start | space-around | space-between

Cross Axis Alignment

Flex items can be aligned in the cross axis of the current line of the flex container, similar to the previous section but in the perpendicular direction. These properties are applied to the flex container.

-webkit-box-align: baseline | center | end | start | stretch
-moz-box-align: baseline | center | end | start | stretch
-ms-flex-align: baseline | center | end | start | stretch
-webkit-align-items: baseline | center | flex-end | flex-start | stretch
align-items: baseline | center | flex-end | flex-start | stretch

These properties also affect alignment in the cross axis of the current line of the flex container, but these properties are applied to the items inside the flex container to override the container property.

-ms-flex-item-align: auto | baseline | center | end | start | stretch
-webkit-align-self: auto | baseline | center | flex-end | flex-start | stretch
align-self: auto | baseline | center | flex-end | flex-start | stretch

Cross Axis Extra Space Distribution

These properties align a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content and box/flex-pack aligns individual items within the main-axis. Note, this property has no effect when the flexbox has only a single line.

-ms-flex-line-pack: center | distribute |
  end | justify | start | stretch
-webkit-align-content: center | flex-end |
  flex-start | space-around | space-between | stretch
align-content: center | flex-end | flex-start |
  space-around | space-between | stretch