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.

Result

Loading...

Live Editor

<Box row spaceX4 alignItems="stretch"> <Box bgOrange400 w-100 py6></Box> <Box bgBlue400 w-100 py4 alignSelf="flex-start"></Box> <Box bgOrange400 w-100 py8></Box> </Box>

<Box row spaceX4 alignItems="stretch">
  <Box bgOrange400 w-100 py6></Box>
  <Box bgBlue400 w-100 py4 alignSelf="flex-start"></Box>
  <Box bgOrange400 w-100 py8></Box>
</Box>

Center

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

Result

Loading...

Live Editor

<Box row spaceX4 alignItems="stretch"> <Box bgOrange400 w-100 py6></Box> <Box bgBlue400 w-100 py4 alignSelf="center"></Box> <Box bgOrange400 w-100 py8></Box> </Box>

<Box row spaceX4 alignItems="stretch">
  <Box bgOrange400 w-100 py6></Box>
  <Box bgBlue400 w-100 py4 alignSelf="center"></Box>
  <Box bgOrange400 w-100 py8></Box>
</Box>

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.

Result

Loading...

Live Editor

<Box row spaceX4 alignItems="stretch"> <Box bgOrange400 w-100 py6></Box> <Box bgBlue400 w-100 py4 alignSelf="flex-end"></Box> <Box bgOrange400 w-100 py8></Box> </Box>

<Box row spaceX4 alignItems="stretch">
  <Box bgOrange400 w-100 py6></Box>
  <Box bgBlue400 w-100 py4 alignSelf="flex-end"></Box>
  <Box bgOrange400 w-100 py8></Box>
</Box>

Auto

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

Result

Loading...

Live Editor

<Box row spaceX4 alignItems="stretch"> <Box bgOrange400 w-100 py6></Box> <Box bgBlue400 w-100 py4 alignSelf="auto"></Box> <Box bgOrange400 w-100 py8></Box> </Box>

<Box row spaceX4 alignItems="stretch">
  <Box bgOrange400 w-100 py6></Box>
  <Box bgBlue400 w-100 py4 alignSelf="auto"></Box>
  <Box bgOrange400 w-100 py8></Box>
</Box>

Stretch

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

Result

Loading...

Live Editor

<Box row spaceX4 h-80 alignItems="center"> <Box bgOrange400 w-100 py4></Box> <Box bgBlue400 w-100 py4 alignSelf="stretch"></Box> <Box bgOrange400 w-100 py4></Box> </Box>

<Box row spaceX4 h-80 alignItems="center">
  <Box bgOrange400 w-100 py4></Box>
  <Box bgBlue400 w-100 py4 alignSelf="stretch"></Box>
  <Box bgOrange400 w-100 py4></Box>
</Box>