How to Set Space Between Flexbox Items

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":
<!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="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="flex3">
      <div class="flex-items">1</div>
      <div class="flex-items">2</div>
      <div class="flex-items">3</div>
    </div>
  </body>
</html>

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.
.flex {
  display: flex;
  font-size: 30px;
  text-align: center;
  background-color: #7d7d7d;
  color: #000000;
  font-weight: bold;
}

.flex2 {
  justify-content: space-around;
}

.flex3 {
  justify-content: space-between;
}

.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:

<!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;
      }
      .flex3 {
        justify-content: space-between;
      }
      .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>

Result

justify-content: space-around
1
2
3
justify-content: space-between
1
2
3

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.

Setting vertical space between Flexbox items

For vertical spacing, you can use the align-items property with the space-between value. This will distribute the items evenly in the container, with space between them vertically. Again, you can adjust the amount of space with the margin property on the items.

Here comes an example to showcase this:

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

      .item {
        margin-bottom: 10px;
        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>
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.

<!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 {
        margin-bottom: 10px;
        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>

In this example, margin-bottom is added to give some space between the items in a column direction, as justify-content: space-between only distributes items vertically.

How to reduce the space between Flexbox items?

To reduce the space between Flexbox items using the space-between or space-around value, you can adjust the margin property on the items themselves. For example, to reduce the space between items using justify-content: space-between, you can decrease the margin-right (or margin-bottom for a column direction) on each item. For justify-content: space-around, you can decrease the margin on each item by half of the desired space reduction.

Here's an example for reducing the space between Flexbox items using justify-content: space-between:

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

      .item {
        margin-right: 20px; /* Initial margin-right */
        border: 1px solid red;
      }

      .item:last-child {
        margin-right: 0; /* Remove margin-right on last item */
      }
    </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>

In this example, the margin-right on each item is initially set to 20px to create some space between the items using justify-content: space-between. To reduce the space between the items, the margin-right on the last item is set to 0 to remove the space on the right side of the last item. You can adjust the margin-right value on the items to your desired spacing.

Similarly, for justify-content: space-around, you can reduce the margin on each item by half of the desired space reduction. For example, if you want to reduce the space between items by 10px, you can set margin-right: 5px on each item.