Align Content

Atomic props for controlling how rows are positioned in multi-row flex and grid containers.

Atomic PropsCSS 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 ()
            ^
LIVE DEMO

Center#

Use alignContent="center" to pack rows in a container in the center of the cross axis.

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

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 ()
            ^
LIVE DEMO

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 ()
            ^
LIVE DEMO

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 ()
            ^
LIVE DEMO

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 ()
            ^
LIVE DEMO