Align Items

Utilities for controlling how flex and grid items are positioned along a container's cross axis.

React propsCSS Properties
alignItems={keyword}align-items: {keyword};

Stretch

Use alignItems="stretch" to stretch items to fill the container's cross axis:

<x.div display="flex" alignItems="stretch"> <x.div py={4}>1</x.div> <x.div py={12}>2</x.div> <x.div py={8}>3</x.div> </x.div>

Start

Use alignItems="start" to align items to the start of the container's cross axis:

<x.div display="flex" alignItems="flex-start"> <x.div h={12}>1</x.div> <x.div h={24}>2</x.div> <x.div h={16}>3</x.div> </x.div>

Center

Use alignItems="center" to align items along the center of the container's cross axis:

<x.div display="flex" alignItems="flex-center"> <x.div h={12}>1</x.div> <x.div h={24}>2</x.div> <x.div h={16}>3</x.div> </x.div>

End

Use alignItems="flex-end" to align items to the end of the container's cross axis:

<x.div display="flex" alignItems="flex-end"> <x.div h={12}>1</x.div> <x.div h={24}>2</x.div> <x.div h={16}>3</x.div> </x.div>

Baseline

Use alignItems="baseline" to align items along the container's cross axis such that all of their baselines align:

<x.div display="flex" alignItems="baseline"> <x.div h={12}>1</x.div> <x.div h={24}>2</x.div> <x.div h={16}>3</x.div> </x.div>

Responsive

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

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

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

Edit this page on GitHub