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.


Do you find this helpful?

Related articles