Align Items

Atomic props for controlling how flex and grid items are positioned along a container's cross axis.

Atomic PropsCSS Properties
alignItems ={value}align-items: {value};

Start#

Use alignItems="start" to align items to the start of the container's cross axis.

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

Center#

Use alignItems="center" to align items along the center of the container's cross axis.

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

End#

Use alignItems="flex-end" to align items to the end of the container's cross axis.

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

Baseline#

Use alignItems="baseline" to align items along the container's cross axis such that all of their baselines align.

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

Stretch#

Use alignItems="stretch" to stretch items to fill the container's cross axis.

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