Justify Content

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

Start

Use justifyContent="flex-start" to justify items against the start of the container's main axis:

<x.div display="flex" justifyContent="flex-start">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Center

Use justifyContent="center" to justify items along the center of the container's main axis:

<x.div display="flex" justifyContent="center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

End

Use justifyContent="flex-end" to justify items against the end of the container's main axis:

<x.div display="flex" justifyContent="flex-end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Space between

Use justifyContent="space-between" to justify items along the container's main axis such that there is an equal amount of space between each item:

<x.div display="flex" justifyContent="space-between">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Space around

Use justifyContent="space-around" to justify items along the container's main axis such that there is an equal amount of space on each side of each item:

<x.div display="flex" justifyContent="space-around">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Space evenly

Use justifyContent="space-evenly" to justify items along the container's main axis such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using justifyContent="space-around":

<x.div display="flex" justifyContent="space-evenly">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Responsive

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

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

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