A Visual Guide to Flexbox

Navigation

Flexbox is working properly on most of mobile devices, and desktop web browsers, except IE older than version 10. You can check detailed browser support for flexbox on Can I use website. Flexbox easily targets common problems in layout design, see a Solved by flexbox website. It's recommended to use sass-flex-mixin which generates prefixed names of flexbox properties, to ensure full compatibility with modern browsers. Property descriptions in this documentation are inspired by comments in sass-flex-mixin source. For more detailed information about how to use flexbox, visit Css-tricks Guide to Flexbox.


In this documentation flexbox containers use min-height: 300px.

Flexbox items use padding: 10px; outline: solid 1px black;

Flexbox

(display: flex)

A block-level flex container box.

item 1
item 2
item 3
item 4

Inline flexbox

(display: inline-flex)

A inline-level flex container box.

item 1
item 2
item 3
item 4

flex-direction:

The 'flex-direction' property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. This determines the direction that flex items are laid out in.

row

item 1
item 2
item 3
item 4

row-reverse

item 1
item 2
item 3
item 4

column

item 1
item 2
item 3
item 4

column-reverse

item 1
item 2
item 3
item 4

flex-wrap:

The 'flex-wrap' property controls 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.

For demonstration containers use max-width: 500px;

nowrap

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12

wrap

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12

wrap-reverse

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12

flex-flow:

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

Values: flex-direction | flex-wrap

For demonstration containers use max-width: 500px;

row-reverse, wrap-reverse

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12

order:

The 'order' property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.

3, 2, 1, 0, none

item 2 order: 3
item 3 order: 2
item 4 order: 1
item 5 order: 0
item 1, none

flex-grow:

The 'flex-grow' property sets the flex grow factor. Negative numbers are invalid.

1 flex grow unit is equal to 1 x size of smallest item, slex-grow: 3 is equal to 3 x smallest column width.

none, 0, 1, 2, 3

flex-grow: none
flex-grow: 0
flex-grow: 1
flex-grow: 2
flex-grow: 3

none, none, none, 1, none

Setting grow to only one item causes it's stretch to available space.

flex-grow: none
flex-grow: none
flex-grow: none
flex-grow: 1
flex-grow: none

flex-shrink:

The 'flex-shrink' property sets the flex shrink factor. Negative numbers are invalid.

Flex shrink defines which item become smaller (bigger shrink value = smaller item), when content is too large.

shrink: 0; causes item to be as wide, as it's content, it may cause item to grow even bigger than browser size.

none, 2, 1, 2, 1

flex-shrink: none
flex-shrink: 2
Fermentum eu erat cursus ac aliquam auctor risus facilisis adipiscing vestibulum taciti quisque curabitur consectetur a quis bibendum faucibus ipsum gravida eleifend massa pharetra in lacinia dis.
flex-shrink: 1
Fermentum eu erat cursus ac aliquam auctor risus facilisis adipiscing vestibulum taciti quisque curabitur consectetur a quis bibendum faucibus ipsum gravida eleifend massa pharetra in lacinia dis.Suscipit elementum scelerisque congue aptent tristique condimentum nibh ultricies a risus consectetur nam eu morbi tristique diam condimentum.Eu pharetra nam leo dictum habitasse parturient consectetur praesent erat a metus volutpat bibendum lacus a parturient leo phasellus fringilla massa et sem condimentum leo penatibus suspendisse convallis.
flex-shrink: 2
Fermentum eu erat cursus ac aliquam auctor risus facilisis adipiscing vestibulum taciti quisque curabitur consectetur a quis bibendum faucibus ipsum gravida eleifend massa pharetra in lacinia dis.
flex-shrink: 1
Fermentum eu erat cursus ac aliquam auctor risus facilisis adipiscing vestibulum taciti quisque curabitur consectetur a quis bibendum faucibus ipsum gravida eleifend massa pharetra in lacinia dis.Suscipit elementum scelerisque congue aptent tristique condimentum nibh ultricies a risus consectetur nam eu morbi tristique diam condimentum.Eu pharetra nam leo dictum habitasse parturient consectetur praesent erat a metus volutpat bibendum lacus a parturient leo phasellus fringilla massa et sem condimentum leo penatibus suspendisse convallis.

none, none, 1

No shrink defined at item is the same as setting shrink: 1.

flex-shrink: none
Fermentum eu erat cursus ac aliquam auctor risus facilisis adipiscing vestibulum taciti quisque curabitur consectetur a quis bibendum faucibus ipsum gravida eleifend massa pharetra in lacinia dis.
flex-shrink: none
Fermentum eu erat cursus ac aliquam auctor risus facilisis adipiscing vestibulum taciti quisque curabitur consectetur a quis bibendum faucibus ipsum gravida eleifend massa pharetra in lacinia dis.
flex-shrink: 1
Fermentum eu erat cursus ac aliquam auctor risus facilisis adipiscing vestibulum taciti quisque curabitur consectetur a quis bibendum faucibus ipsum gravida eleifend massa pharetra in lacinia dis.

flex-basis:

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

150px

item 1
item 2
item 3

100%, 50%, 50%

item 1, flex-basis: 100%
item 2, flex-basis: 50%
item 3, flex-basis: 50%

flex:

Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the flex grow factor and flex shrink factor, and the flex basis. When an element is a flex item, 'flex' is consulted instead of the main size property to determine the main size of the element. If an element is not a flex item, 'flex' has no effect.

Values: none | flex-grow flex-shrink || flex-basis

1 flex grow unit is equal to 1 x size of smallest item, so flex: 3 is equal to 3 x smallest column width.

1, 2, 3

item 1, flex: 1
item 2, flex: 2
item 3, flex: 3

justify-content:

The 'justify-content' property aligns 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. Typically it helps distribute extra free space leftover 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

item 1
item 2
item 3
item 4

flex-end

item 1
item 2
item 3
item 4

center

item 1
item 2
item 3
item 4

space-between

item 1
item 2
item 3
item 4

space-around

item 1
item 2
item 3
item 4

align-items:

Flex items can be aligned in the cross axis of the current line of the flex container, similar to 'justify-content' but in the perpendicular direction. 'align-items' sets the default alignment for all of the flex container's items, including anonymous flex items. 'align-self' allows this default alignment to be overridden for individual flex items. (For anonymous flex items, 'align-self' always matches the value of 'align-items' on their associated flex container.)

flex-start

height: 200px
line-height: 150px
height: 100px
height: 50px

flex-end

height: 200px
line-height: 150px
height: 100px
height: 50px

center

height: 200px
line-height: 150px
height: 100px
height: 50px

baseline

height: 200px
line-height: 150px
height: 100px
height: 50px

stretch

height: 200px
line-height: 150px
height: 100px
height: 50px

align-self:

none, auto, flex-start, flex-end, center, baseline, stretch

align-self: none
align-self: auto
align-self: flex-start
align-self: flex-end
align-self: center
align-self: baseline
align-self: stretch

align-content:

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. Note, this property has no effect when the flexbox has only a single line.

Align-content works with multiple-lines of items. Set flex-wrap: wrap, to see the effect.

For demonstration containers use max-width: 500px;

flex-start

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11

flex-end

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11

center

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11

space-between

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11

space-around

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11

stretch

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11

Resources