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}; |
#
StartUse 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
#
CenterUse 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
#
EndUse 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
#
AutoUse 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
#
StretchUse 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