Align Items

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

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.