Align Content
Atomic props for controlling how rows are positioned in multi-row flex and grid containers.
Atomic Props | CSS Properties |
---|---|
alignContent={value} | align-content: {value}; |
#
StartUse alignContent="flex-start"
to pack rows in a container against the start of the cross axis.
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
CenterUse alignContent="center"
to pack rows in a container in the center of the cross axis.
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
EndUse alignContent="flex-end"
to pack rows in a container against the end of the cross axis.
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
Space betweenUse alignContent="space-between"
to distribute rows in a container such that there is an equal amount of space between each line.
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
Space evenlyUse alignContent="space-evenly"
to distribute rows in a container 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 content-around.
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
Space aroundUse alignContent="space-around"
to distribute rows in a container such that there is an equal amount of space around each line.
SyntaxError: Unexpected token (1:8) 1 : return () ^