Justify Content

Atomic props for controlling how flex and grid items are positioned along a container's main axis.

Atomic PropsCSS Properties
justifyContent={value}justify-content: {value};

Start#

Use justifyContent="flex-start" to justify items against the start of the container's main axis.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Center#

Use justifyContent="center" to justify items along the center of the container's main axis.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

End#

Use justifyContent="flex-end" to justify items against the end of the container's main axis.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Space between#

Use justifyContent="space-between" to justify items along the container's main axis such that there is an equal amount of space between each item.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Space around#

Use justifyContent="space-around" to justify items along the container's main axis such that there is an equal amount of space on each side of each item.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Space evenly#

Use justifyContent="space-evenly" to justify items along the container's main axis such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using justifyContent="space-around".

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO