Align Self

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

Auto

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

<x.div display="flex" alignItems="stretch">
  <div>1</div>
  <x.div alignSelf="auto">2</x.div>
  <div>3</div>
</x.div>

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:

<x.div display="flex" alignItems="stretch">
  <div>1</div>
  <x.div alignSelf="flex-start">2</x.div>
  <div>3</div>
</x.div>

Center

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

<x.div display="flex" alignItems="stretch">
  <div>1</div>
  <x.div alignSelf="center">2</x.div>
  <div>3</div>
</x.div>

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:

<x.div display="flex" alignItems="stretch">
  <div>1</div>
  <x.div alignSelf="flex-end">2</x.div>
  <div>3</div>
</x.div>

Stretch

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

<x.div display="flex" alignItems="flex-start">
  <div>1</div>
  <x.div alignSelf="stretch">2</x.div>
  <div>3</div>
</x.div>

Responsive

To control the alignment of flex items at a specific breakpoint, use responsive object notation. For example, adding the property alignSelf={{ md: "center" }} to an element would apply the alignSelf="center utility at medium screen sizes and above.

<x.div display="grid" alignSelf={{ md: 'center' }}>
  {/* ... */}
</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.