Align Self

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

React propsCSS Properties
alignSelf={keyword}align-self: {keyword};

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.

Edit this page on GitHub