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:

<> <template preview> <x.div h={48} display="flex" alignItems="stretch" bg="light-blue-200" borderRadius="md" p={4} spaceX={4} > <x.div py={4} flex="1 1 0" borderRadius="md" bg="light-blue-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 1 </x.div> <x.div py={12} flex="1 1 0" borderRadius="md" bg="light-blue-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 2 </x.div> <x.div py={8} flex="1 1 0" borderRadius="md" bg="light-blue-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 3 </x.div> </x.div> </template> <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:

<> <template preview> <x.div h={48} display="flex" alignItems="flex-start" bg="fuchsia-200" borderRadius="md" p={4} spaceX={4} > <x.div h={12} flex="1 1 0" borderRadius="md" bg="fuchsia-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 1 </x.div> <x.div h={24} flex="1 1 0" borderRadius="md" bg="fuchsia-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 2 </x.div> <x.div h={16} flex="1 1 0" borderRadius="md" bg="fuchsia-500" 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"> <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:

<> <template preview> <x.div h={48} display="flex" alignItems="center" bg="red-200" borderRadius="md" p={4} spaceX={4} > <x.div h={12} flex="1 1 0" borderRadius="md" bg="red-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 1 </x.div> <x.div h={24} flex="1 1 0" borderRadius="md" bg="red-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 2 </x.div> <x.div h={16} flex="1 1 0" borderRadius="md" bg="red-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 3 </x.div> </x.div> </template> <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:

<> <template preview> <x.div h={48} display="flex" alignItems="flex-end" bg="amber-200" borderRadius="md" p={4} spaceX={4} > <x.div h={12} flex="1 1 0" borderRadius="md" bg="amber-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 1 </x.div> <x.div h={24} flex="1 1 0" borderRadius="md" bg="amber-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 2 </x.div> <x.div h={16} flex="1 1 0" borderRadius="md" bg="amber-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 3 </x.div> </x.div> </template> <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:

<> <template preview> <x.div h={48} display="flex" alignItems="baseline" bg="emerald-200" borderRadius="md" p={4} spaceX={4} > <x.div h={12} flex="1 1 0" borderRadius="md" bg="emerald-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 1 </x.div> <x.div h={24} flex="1 1 0" borderRadius="md" bg="emerald-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 2 </x.div> <x.div h={16} flex="1 1 0" borderRadius="md" bg="emerald-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 3 </x.div> </x.div> </template> <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