Space between

Class reference

# Add horizontal space between children

Control the horizontal space between elements using the space-x-{amount} utilities.

<div class="flex space-x-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

# Add vertical space between children

Control the horizontal space between elements using the space-y-{amount} utilities.

<div class="flex space-y-6">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

# Reversing children order

If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the space-x-reverse or space-y-reverse utilities to ensure the space is added to the correct side of each element.

<div class="flex flex-row-reverse space-x-4 space-x-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

# Responsive

To control the space between elements at a specific breakpoint, add a {screen}: prefix to any existing space utility. For example, adding the class md:space-x-8 to an element would apply the space-x-8 utility at medium screen sizes and above.

<div class="flex space-x-2 **md:space-x-8**">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.