W3docs
en
Log in

How to Set Space Between Flexbox Items

In this tutorial, we’ll show how you can easily set distance between flexbox items. For this, we’ll use the CSS justify-content property with two of its values.

Tags

Flexbox is a single-dimensional layout, which lays items in one dimension at a time (either as a row or as a column).

The main purpose of the Flexbox Layout is to distribute space between items of a container. It works even in those cases when the item size is unknown or dynamic.

You can easily set distance between flexbox items using the CSS justify-content property. In this snippet, we’ll show how to do this.

Create HTML

  • Create three <div> elements having a class name "flex-items":

How to Set Space Between Flexbox Items

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Space between flexbox</h1>
    <h2>justify-content: space-around </h2>
    <div class="flex flex2">
      <div class="flex-items">1</div>
      <div class="flex-items">2</div>
      <div class="flex-items">3</div>
    </div>
    <h2>justify-content: space-between </h2>
    <div class="flex flex3">
      <div class="flex-items">1</div>
      <div class="flex-items">2</div>
      <div class="flex-items">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Add CSS

  • Set the justify-content property to "space-around" for the .flex2 element.
  • Set the justify-content property to "space between" for the .flex3 element.
  • Set the display property to “flex” for both elements.
  • Add style using the width, height, background-color, margin, and other properties.

How to Set Space Between Flexbox Items

.flex {
  display: flex;
  font-size: 30px;
  text-align: center;
  background-color: #7d7d7d;
  color: #000000;
  font-weight: bold;
}

.flex2 {
  justify-content: space-around;
  gap: 10px;
}

.flex3 {
  justify-content: space-between;
  gap: 10px;
}

.flex-items {
  background-color: #cccaca;
  width: 90px;
  height: 60px;
  margin: 10px;
  text-align: center;
  font-size: 40px;
  line-height: 1.5;
}

Let’s see the result of our code.

Example of setting distance between flexbox items:

How to Set Space Between Flexbox Items

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex {
        display: flex;
        font-size: 30px;
        text-align: center;
        background-color: #7d7d7d;
        color: #000000;
        font-weight: bold;
      }
      .flex2 {
        justify-content: space-around;
        gap: 10px;
      }
      .flex3 {
        justify-content: space-between;
        gap: 10px;
      }
      .flex-items {
        background-color: #cccaca;
        width: 90px;
        height: 60px;
        margin: 10px;
        text-align: center;
        font-size: 40px;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <h1>Space between flexbox</h1>
    <h2>justify-content: space-around </h2>
    <div class="flex flex2">
      <div class="flex-items">1</div>
      <div class="flex-items">2</div>
      <div class="flex-items">3</div>
    </div>
    <h2>justify-content: space-between </h2>
    <div class="flex flex3">
      <div class="flex-items">1</div>
      <div class="flex-items">2</div>
      <div class="flex-items">3</div>
    </div>
    <br />
  </body>
</html>
Try it Yourself »

Result

<div class="demo mt-1 mb-5 px-5 not-prose"> justify-content: space-around <div class="flex flex2 mb-2.5"> <div class="flex-items">1</div> <div class="flex-items">2</div> <div class="flex-items">3</div> </div> justify-content: space-between <div class="flex flex3"> <div class="flex-items">1</div> <div class="flex-items">2</div> <div class="flex-items">3</div> </div> </div> In the example mentioned above, we have used the justify-content property with two of its values: space-between and space-around. The space-between value distributes the items evenly (with space between them) in the line. The first item is on the start line, and the last one is on the end line. The space-around value displays the items with space before, between, and after. Note that outer gaps are half the size of inner gaps. For equal spacing on all sides, use space-evenly.

Setting vertical space between Flexbox items

For vertical spacing, you can use the justify-content property with the space-between value. Since justify-content always targets the main axis, you must set flex-direction: column to make the main axis vertical. This will distribute the items evenly in the container, with space between them vertically. Again, you can adjust the amount of space with the gap property on the container.

Here comes an example to showcase this:

Setting vertical space between Flexbox items

<!DOCTYPE html>
<html>
  <head>
    <title>Setting vertical space between Flexbox items</title>
    <style>
      .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 15px;
        background: yellow;
      }

      .item {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>
Try it Yourself »
Info

To change the space between Flexbox items, you can adjust the "margin" property on the items themselves. To distribute the items evenly, you can use "justify-content" with the "space-between" or "space-around" value.

Evenly spacing Flexbox items in a column direction

To evenly space Flexbox items in a column direction, you can use the justify-content property with the space-between or space-around value, and set align-items to center to align the items in the center of the container.

Evenly spacing Flexbox items in a column direction

<!DOCTYPE html>
<html>
  <head>
    <title>Evenly spacing Flexbox items in a column direction</title>
    <style>
      .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background: yellow;
      }

      .item {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>
Try it Yourself »

In this example, justify-content: space-between distributes items along the main axis, which becomes vertical when flex-direction: column is set. Using gap on the container is the modern approach for controlling spacing without relying on item margins.

How to reduce the space between Flexbox items?

To adjust the space between Flexbox items when using space-between or space-around, the modern and most efficient approach is to use the gap property on the flex container. The gap property directly controls the spacing between items without affecting the outer edges or requiring manual margin calculations.

Here's an example using gap to control spacing:

<!DOCTYPE html>
<html>
  <head>
    <title>Evenly spacing Flexbox items in a column direction</title>
    <style>
      .container {
        display: flex;
        justify-content: space-between;
        gap: 10px; /* Controls space between items */
        background: yellow;
      }

      .item {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>
Try it Yourself »

In this example, the gap property is set to 10px to create consistent space between the items. By adjusting the gap value, you can easily increase or decrease the spacing. Note that when using justify-content: space-between, manual margins on items are generally unnecessary and can lead to unexpected spacing behavior.