Align Self

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

Atomic Props	CSS 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