Align Self

Atomic props for controlling how an individual flex or grid item is positioned along its container's cross axis.

Atomic PropsCSS Properties
alignSelf={value}align-self: {value};

Start#

Use alignSelf="flex-start" to align an item to the start of the container's cross axis, despite the container's align-items value.

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

Center#

Use alignSelf="center" to align an item along the center of the container's cross axis, despite the container's align-items value.

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

End#

Use alignSelf="flex-end" to align an item to the end of the container's cross axis, despite the container's align-items value.

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

Auto#

Use alignSelf="auto" to align an item based on the value of the container's align-items property.

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

Stretch#

Use alignSelf="stretch" to stretch an item to fill the container's cross axis, despite the container's align-items value.

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