A NSW Government website
NSW Government
Design System v3.16.0

Flex

Utilities to manage the layout, alignment and sizing of flex items and components with a suite of responsive flexbox utilities.

Enable flex behaviors

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

I'm a flexbox container!
I'm an inline flexbox container!

Direction

Set the direction of flex items in a flex container with direction utilities.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Justify content

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis. Choose from start (browser default), end, center, between, around, or evenly.

Justify
Content
Start
Justify
Content
End
Justify
Content
Center
Justify
Content
Between
Justify
Content
Around
Justify
Content
Evenly

Align items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis. Choose from start, end, center, baseline, or stretch (browser default).

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Align self

Use align-self utilities on flexbox items to individually change their alignment on the cross axis. Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).

Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item

Fill

Flex item with a lot of content
Flex item
Flex item

Grow and shrink

Flex item
Flex item
Third flex item
Flex item
Flex item

Wrap

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

Order

First flex item
Second flex item
Third flex item

Align content

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item