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}; |
Start#
Use alignContent="flex-start" to pack rows in a container against the start of the cross axis.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Center#
Use alignContent="center" to pack rows in a container in the center of the cross axis.
SyntaxError: Unexpected token (1:8)
1 : return ()
^End#
Use alignContent="flex-end" to pack rows in a container against the end of the cross axis.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Space between#
Use 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 evenly#
Use 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 around#
Use 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 ()
^