Flexbox examples

Row of elements

Default flexbox row behavior.

box 1

box 2

box 3

box 4

box 5

Row of elements, centered

Using the justify-content property to center the elements within the container.

box 1

box 2

box 3

Row of elements, right-aligned

Using the justify-content property to right-align the elements within the container.

box 1

box 2

box 3

Row of elements, space-between

Using the justify-content property to space the elements out evenly within the container.

box 1

box 2

box 3

Row of elements, growing to fit width

Using the flex-grow property to expand the elements so they fill the container.

box 1

box 2

box 3

Row of elements, unevenly growing to fit width

Using the flex-grow property to expand the elements in differing amounts.

box 1

box 2

box 3

Wrapping row of elements

Using the flex-wrap property to allow wrapping of elements within the container.

box 1

box 2

box 3

box 4

box 5

Wrapping row of elements, centered

Using flex-wrap to allow wrapping and justify-content to center.

box 1

box 2

box 3

box 4

box 5

Wrapping row of elements, right-aligned

Using flex-wrap to allow wrapping and justify-content to right-align.

box 1

box 2

box 3

Wrapping row of elements, space-between

Using flex-wrap to allow wrapping and justify-content to space out elements evenly.

box 1

box 2

box 3