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}; |
#
StartUse justifyContent="flex-start"
to justify items against the start of the container's main axis.
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
CenterUse justifyContent="center"
to justify items along the center of the container's main axis.
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
EndUse justifyContent="flex-end"
to justify items against the end of the container's main axis.
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
Space betweenUse 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 aroundUse 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 evenlyUse 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 () ^