CSS3 Flexbox Reference

This is a quick reference and overview of CSS Flexible Box Layout Module properties.
For convenience there are links to W3 spec and Mozilla doc provided for each property.
Click on property descriptions shows/hides additional details.
Following button shows/hides details for all properties:

Resources: W3 spec and Mozilla doc

Flexbox layout basically consists of two types of elements:

• Containers with display property set to flex or inline-flex.
• Items are child elements of Containers.

Flex Container
display	flex | inline-flex
Set display property to activate flexbox layout. Difference between flex and inline-flex is like between block and inline-block. New Value flex | inline-flex Name display
flex-direction	row | row-reverse | column | column-reverse	default: row
Defines how flex items belonging to a common flex container are placed by setting the main axis. Initial row Name flex-direction Media visual Animatable no Computed Value specified value Applies To flex containers Value row | row-reverse | column | column-reverse Inherited no Canonical Order per grammar The value row is horizontal (left on the image), column is vertical (right). Add -reverse for ordering from last to first item.
flex-wrap	nowrap | wrap | wrap-reverse	default: nowrap
Defines how flex items are wrapped into lines. Initial nowrap Name flex-wrap Media visual Animatable no Computed Value specified value Applies To flex containers Value nowrap | wrap | wrap-reverse Inherited no Canonical Order per grammar nowrap single-line, lays out all of its children in a single line, even if that would cause its contents to overflow wrap multi-line, flex container breaks its flex items across multiple lines to avoid overflowing wrap-reverse same as ‘wrap’, except the cross-start and cross-end directions are swapped
flex-flow	<'flex-direction'> || <'flex-wrap'>	default: see individual properties
A shorthand property to define <code>flex-direction</code> and <code>flex-wrap</code>. Initial see individual properties Name flex-flow Media visual Animatable no Computed Value see individual properties Applies To flex containers Value <'flex-direction'> || <'flex-wrap'> Inherited see individual properties Canonical Order per grammar Examples: flex-flow: row; flex-flow:column nowrap
justify-content	flex-start | flex-end | center | space-between | space-around	default: flex-start
Defines how flex items are laid out along the main axis on the current line. Initial flex-start Name justify-content Media visual Animatable no Computed Value specified value Applies To flex containers Value flex-start | flex-end | center | space-between | space-around Inherited no Canonical Order per grammar
align-items	flex-start | flex-end | center | baseline | stretch	default: stretch
Defines how flex items are aligned along the cross axis. Initial stretch Name align-items Media visual Animatable no Computed Value specified value Applies To flex containers Value flex-start | flex-end | center | baseline | stretch Inherited no Canonical Order per grammar
align-content	flex-start | flex-end | center | space-between | space-around | stretch	default: stretch
Defines how a flex container's lines are aligned along the cross axis (only for multi-line containers). Initial stretch Name align-content Media visual Animatable no Computed Value specified value Applies To multi-line flex containers Value flex-start | flex-end | center | space-between | space-around | stretch Inherited no Canonical Order per grammar The ‘align-content’ property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how ‘justify-content’ aligns individual items within the main-axis:
Flex Item
flex-grow	<number>	default: ‘0’
Defines how much the flex item's size will increase in proportion to the other items in the flex container when free space is distributed. Initial ‘0’ Name flex-grow Media visual Animatable yes, except between ‘0’ and other values Computed Value specified value Applies To flex items Value <number> Inherited no Canonical Order per grammar Negative numbers are invalid.
flex-shrink	<number>	default: ‘1’
Defines how much the flex item's size will decrease in proportion to the other items in the flex container. Initial ‘1’ Name flex-shrink Media visual Animatable yes, except between ‘0’ and other values Computed Value specified value Applies To flex items Value <number> Inherited no Canonical Order per grammar Negative numbers are invalid.
flex-basis	<'width'>	default: auto
Determines the initial main size of a flex item. Initial auto Name flex-basis Percentages relative to the flex container's inner main size Media visual Animatable yes, insofar as ‘width’ is animatable Computed Value as specified, with lengths made absolute Applies To flex items Value <'width'> Inherited no Canonical Order per grammar If omitted it the value of is either the ‘width’ or ‘height’ property, whichever is in the main dimension.
flex	none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]	default: see individual properties
A shorthand property for flex-grow, flex-shrink, and flex-basis that reflects the ability of a flex item to either stretch of shrink when needed. Initial see individual properties Name flex Media visual Animatable see individual properties Computed Value see individual properties Applies To flex items Value none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] Inherited see individual properties Canonical Order per grammar
order	<number>	default: 0
Defines the order in which flex items appear in a flex layout. Initial 0 Name order Media visual Animatable yes Computed Value specified value Applies To all elements Value <number> Inherited no Canonical Order per grammar The ‘order’ property controls the order in which elements appear, by assigning them to ordinal groups. Within flex layout, it controls the order of flex items in their flex container. A flex container will lay out its content starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document.
align-self	auto | flex-start | flex-end | center | baseline | stretch	default: auto
Defines how an individual item is aligned on the cross axis, and overrides the default established by align-items. Initial auto Name align-self Media visual Animatable no Computed Value ‘auto’ computes to parent's ‘align-items’; otherwise as specified Applies To flex items Value auto | flex-start | flex-end | center | baseline | stretch Inherited no Canonical Order per grammar auto means value of parent container

Created by: Jakub Dundalek
Last updated: 18.6.2012