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:

<> <template preview> <x.div h={24} display="flex" alignItems="stretch" spaceX={2}> <x.div flex="1 1 0" borderRadius="md" bg="emerald-400" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 1 </x.div> <x.div alignSelf="auto" flex="1 1 0" borderRadius="md" bg="emerald-600" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 2 </x.div> <x.div flex="1 1 0" borderRadius="md" bg="emerald-400" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 3 </x.div> </x.div> </template> <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:

<> <template preview> <x.div h={24} display="flex" alignItems="stretch" spaceX={2}> <x.div flex="1 1 0" borderRadius="md" bg="amber-400" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 1 </x.div> <x.div alignSelf="start" py={3} flex="1 1 0" borderRadius="md" bg="amber-600" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 2 </x.div> <x.div flex="1 1 0" borderRadius="md" bg="amber-400" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 3 </x.div> </x.div> </template> <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:

<> <template preview> <x.div h={24} display="flex" alignItems="stretch" spaceX={2}> <x.div flex="1 1 0" borderRadius="md" bg="light-blue-400" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 1 </x.div> <x.div alignSelf="center" py={3} flex="1 1 0" borderRadius="md" bg="light-blue-600" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 2 </x.div> <x.div flex="1 1 0" borderRadius="md" bg="light-blue-400" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 3 </x.div> </x.div> </template> <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:

<> <template preview> <x.div h={24} display="flex" alignItems="stretch" spaceX={2}> <x.div flex="1 1 0" borderRadius="md" bg="red-400" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 1 </x.div> <x.div alignSelf="flex-end" py={3} flex="1 1 0" borderRadius="md" bg="red-600" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 2 </x.div> <x.div flex="1 1 0" borderRadius="md" bg="red-400" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 3 </x.div> </x.div> </template> <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:

<> <template preview> <x.div h={24} display="flex" alignItems="flex-start" spaceX={2}> <x.div py={3} flex="1 1 0" borderRadius="md" bg="fuchsia-400" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 1 </x.div> <x.div alignSelf="stretch" py={3} flex="1 1 0" borderRadius="md" bg="fuchsia-600" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 2 </x.div> <x.div py={3} flex="1 1 0" borderRadius="md" bg="fuchsia-400" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 3 </x.div> </x.div> </template> <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