Flexbox and when to use it

Flexbox is best suited to laying out content blocks within a page that need to flow and change to suit the page. It’s best suited to one-dimensional layouts that flow from one row to the next, as compared to CSS grid which allows for two-dimensional positioning of elements.

Flex containers hold flex items; these child items will no longer display as block-level elements but will arrange themselves according to the properties of the flex container and items. Enable flex properties with display: flex; on the flex container.

Flex properties

Justify Content

flex-start (default)

1
2
3

flex-end

1
2
3

center

1
2
3

space between

1
2
3

space-around

1
2
3

space-evenly

1
2
3

Align Content (aligns rows vertically)

flex-start (default)

1
2
3
4
5
6
7

flex-end

1
2
3
4
5
6
7

center

1
2
3
4
5
6
7

space between

1
2
3
4
5
6
7

space-around

1
2
3
4
5
6
7

space-evenly

1
2
3
4
5
6
7

Align Items (aligns items vertically)

flex-start (default)

1
2
3

flex-end

1
2
3

center

1
2
3

baseline

1
2
3

stretch

1
2
3

Item Specific Properties

align-self

flex-start
flex-end
center
stretch

order

1

order: 4
2

order: 5
3

order: 2
4

order: 3
5

order: 1

Flex Flow (Direction & Wrap)

row wrap

1
2
3
4
5
6
7

row-reverse wrap

1
2
3
4
5
6
7

column wrap

1
2
3
4
5
6
7

column-reverse wrap

1
2
3
4
5
6
7

row wrap-reverse

1
2
3
4
5
6
7

row-reverse wrap-reverse

1
2
3
4
5
6
7

column wrap-reverse

1
2
3
4
5
6
7

column-reverse wrap-reverse

1
2
3
4
5
6
7

Flex (Grow, Shrink, Basis)

flex-grow

1
2
3
off (0)

Default: 0
This enables each flex item to grow proportionally to fill the container depending on their flex-grow value. Values can be integers or floats. For example, 3 will absorb 3x as much of the empty space as 1.

flex-shrink

1
2
3
off (0)

Default: 1
This enables each flex item to shrink proportionally to fit inside the container depending on their flex-shrink value. Shrinking will depend on the content within an item; items will not shrink below their content size. Values can be integers or floats. For example, 3 will shrink 3x as much as 1.

flex-basis

200px
20%
600px
auto

Default: auto
This tells the browser what the ideal size is for the item. It will try to render it this size, but will shrink as necessary to fit within the flex container if enabled. Values must be a dimensioned size such as % or px. Set flex-shrink to 0 and add a wrap to force items to maintain their size and break onto new lines if needed.

flex

1 0 200px
0 3 20%
2 1 200px
4 1 auto

Default: 1 0 auto

Format: [flex-grow] [flex-shrink] [flex-basis] or [max] [min] [ideal]

If there is only one numerical value, that will only set flex-grow.