css-tricks.

com

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox

Last updated on: June 26, 2014

Background
Basics & Terminology

container

Properties for the Parent

(flex container)
display
This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct
children.
.container {
display: flex;
}
Note that CSS columns have no effect on a flex container.

flex-direction

This establishes the main-axis, thus defining the direction

flex items are placed in the flex container. Flexbox is (aside
from optional wrapping) a single-direction layout concept.
Think of flex items as primarily laying out either in
horizontal rows or vertical columns.
.container {
flex-direction: row | row-reverse | column | columnreverse;
}
row (default): left to right in ltr; right to left in rtl

row-reverse: right to left in ltr; left to right in rtl

column: same as row but top to bottom
column-reverse: same as row-reverse but bottom to top

flex-wrap

By default, flex items will all try to fit onto one line. You can
change that and allow the items to wrap as needed with
this property. Direction also plays a role here, determining
the direction new lines are stacked in.
.container{
flex-wrap: nowrap | wrap | wrapreverse;
}
nowrap (default): single-line / left to right in ltr; right to left in rtl
wrap: multi-line / left to right in ltr; right to left in rtl
wrap-reverse: multi-line / right to left in ltr; left to right in rtl

flex-flow (Applies to: parent flex container element)

This is a shorthand flex-direction and flex-wrap properties, which together define the flex container's
row
main and cross axes. Default is nowrap
.
flex-flow: <flex-direction> || <flexwrap>

justify-content

This defines the alignment along the main axis. It helps

distribute extra free space left over when either all the flex
items on a line are inflexible, or are flexible but have
reached their maximum size. It also exerts some control
over the alignment of items when they overflow the line.

flex-start

flex-end

center

space-between

space-around

.container {
justify-content: flex-start | flex-end | center | space-between | spacearound;
}
flex-start (default): items are packed toward the start line
flex-end: items are packed toward to end line
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end
line
space-around: items are evenly distributed in the line with equal space around them

align-items

This defines the default behaviour for how flex items are
laid out along the cross axis on the current line. Think of it
as the justify-content version for the cross-axis
(perpendicular to the main-axis).

flex-start

flex-end

center

stretch

baseline
text text

text text

text text

.container {
align-items: flex-start | flex-end | center | baseline |
stretch;
}
flex-start: cross-start margin edge of the items is placed on the cross-start line
flex-end: cross-end margin edge of the items is placed on the cross-end line
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
stretch (default): stretch to fill the container (still respect min-width/max-width)

align-content

text text

This aligns a flex container's lines within when there is

extra space in the cross-axis, similar to how
justify-content aligns individual items within the mainaxis.

flex-start

flex-end

center

stretch

space-between

space-around

Note: this property has no effect when there is only one

line of flex items.

.container {
align-content: flex-start | flex-end | center | space-between | space-around |
stretch;
}
flex-start: lines packed to the start of the container
flex-end: lines packed to the end of the container
center: lines packed to the center of the container
space-between: lines evenly distributed; the first line is at the start of the container while the last one is at
the end
space-around: lines evenly distributed with equal space between them
stretch (default): lines stretch to take up the remaining space

items

Properties for the Children

(flex items)
order

By default, flex items are laid out in the source

order. However, the order property controls
the order in which they appear in the flex
container.

order: 2
order: 3

.item {
order: <integer>;
}

flex-grow

This defines the ability for a flex item to grow if

necessary. It accepts a unitless value that
serves as a proportion. It dictates what
amount of the available space inside the flex
container the item should take up.

1
1

1
2

1
1

If all items have flex-grow set to 1, every

child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child
would take up twice as much space as the others.
.item {
flex-grow: <number>;
}
Negative numbers are invalid.

flex-shrink
This defines the ability for a flex item to shrink if necessary.
.item {
flex-shrink: <number>;
}
Negative numbers are invalid.

flex-basis
This defines the default size of an element before the remaining space is distributed.
.item {
flex-basis: <length> | auto;
}

flex
This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third

0 1
parameters (flex-shrink and flex-basis) are optional. Default is auto

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>
]
}

align-self

This allows the default alignment (or the one specified by

align-items) to be overridden for individual flex items.

flex-start

Please see the align-items explanation to understand

the available values.

flex-end

.item {
align-self: auto | flex-start | flex-end | center | baseline |
stretch;
}
Note that float, clear and vertical-align have no effect on a flex item.

Examples
Let's start with a very very simple example, solving an almost daily problem: perfect centering. It couldn't be any
simpler if you use flexbox.
.parent {
display: flex;
height: 300px;
}
.child {
width: 100px;
height: 100px;
margin: auto;
}
This relies on the fact a margin set to `auto` in a flex container absorb extra space. So setting a vertical margin of
auto will make the item perfectly centered in both axis.
Now let's use some more properties. Consider a list of 6 items, all with a fixed dimensions in a matter of aesthetics
but they could be auto-sized. We want them to be evenly and nicely distributed on the horizontal axis so that when
we resize the browser, everything is fine (without media queries!).

.flex-container {
display: flex;

flex-flow: row wrap;

justify-content: spacearound;
}
Done. Everything else is just some styling concern. Below is a pen featuring this example. Be sure to go to
CodePen and try resizing your windows to see what happen.
Let's try something else. Imagine we have a right-aligned navigation on the very top of our website, but we want it
to be centered on medium-sized screens and single-columned on small devices. Easy enough.

.navigation {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}

@media all and (max-width: 800px)

{
.navigation {
justify-content: space-around;
}
}

@media all and (max-width: 500px)

{
.navigation {
flex-direction: column;
}
}
Let's try something even better by playing with flex items flexibility! What about a mobile-first 3-columns layout with
full-width header and footer. And independent from source order.

.wrapper {
display: flex;
flex-flow: row wrap;
}

.header, .main, .nav, .aside, .footer

{
flex: 1 100%;
}

@media all and (min-width: 600px) {

.aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {

.main { flex: 2 0px; }
.aside-1
.main
.aside-2
.footer

{
{
{
{

order:
order:
order:
order:

1;
2;
3;
4;

}
}
}
}

Prefixing Flexbox
Related Properties
Other Resources
Browser Support
Broken up by "version" of flexbox:
display:
(new) means the recent syntax from the specification (e.g. flex;
display:
(tweener) means an odd unofficial syntax from 2011 (e.g. flexbox;
display:
(old) means the old syntax from 2009 (e.g. box;
Chrome

Safari

Firefox

21+ (new)
20- (old)

3.1+ (old)
6.1+ (new)

2-21 (old)
22+ (new)

Opera

)
)

)
IE

12.1+ (new) 10 (tweener)

11+ (new)

Android

iOS

2.1+ (old)
4.4+ (new)

3.2+ (old)
7.1+ (new)

Blackberry browser 10+ supports the new syntax.

For more informations about how to mix syntaxes in order to get the best browser support, please refer to this
article (CSS-Tricks) or this article (DevOpera).