Justify Content
Atomic props for controlling how flex and grid items are positioned along a container's main axis.
| Atomic Props | CSS 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 ()
^Center#
Use justifyContent="center" to justify items along the center of the container's main axis.
SyntaxError: Unexpected token (1:8)
1 : return ()
^End#
Use justifyContent="flex-end" to justify items against the end of the container's main axis.
SyntaxError: Unexpected token (1:8)
1 : return ()
^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 ()
^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 ()
^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 ()
^