Align Content

Utilities for controlling how rows are positioned in multi-row flex and grid containers.

Start

Use alignContent="flex-start" to pack rows in a container against the start of the cross axis:

<x.div h={48} display="flex" flexWrap="wrap" alignContent="flex-start">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</x.div>

Center

Use alignContent="center" to pack rows in a container in the center of the cross axis:

<x.div h={48} display="flex" flexWrap="wrap" alignContent="center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</x.div>

End

Use alignContent="flex-end" to pack rows in a container against the end of the cross axis:

<x.div h={48} display="flex" flexWrap="wrap" alignContent="flex-end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</x.div>

Space between

Use alignContent="space-between" to distribute rows in a container such that there is an equal amount of space between each line:

<x.div h={48} display="flex" flexWrap="wrap" alignContent="space-between">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</x.div>

Space around

Use alignContent="space-around" to distribute rows in a container such that there is an equal amount of space around each line:

<x.div h={48} display="flex" flexWrap="wrap" alignContent="space-around">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</x.div>

Responsive

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

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

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