justify-content: space-between will automatically fill the space between the elements on the flex-axis. This means that 1. you have no control over the amount of space between the elements, the browser will calculate and fill as it sees fit; 2. only the space on the flex-axis (default: row; x-axis) is filled so the space below your first row is not filled automatically.

The solution is to go back to good ol' margins. Do note that margin behaves slightly different on flex items, i.e. margin: auto will fill the available space with a margin.

/* === RESERVATION === */
.reservation {
  flex-direction: row-reverse;
}


/* === FLEXCONTAINER === */

.flexcontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}


.flexcontainer p {
  width: 500px;
}

.flexcontainer article {
  display: flex;
}

.flexcontainer article img {
  width: 500px;
  margin: 24px;
  margin-left: 0;
}

.flexcontainer article:nth-child(even) img {
  margin: 24px;      
  margin-right: 0;
}

<section class="flexcontainer">
  <article class="beliefs">
    <img src="https://via.placeholder.com/500" alt="Our beliefs image" title="Our beliefs">
    <div>
      <h3>Our beliefs</h3>
      <p>When eating...</p>
      <p>We know...</p>
    </div>
  </article>
  <article class="reservation">
    <img src="https://via.placeholder.com/500" alt="reservation image" title="Reservation">
    <div>
      <h3>Reservation</h3>
      <p>To fully...</p>
      <p>This way...</p>
    </div>
  </article>
</section>

The best solution would be to use margin: auto on the flex items horizontal margins as follows:

    .flexbox {
       background-color: pink;
       display: flex;
       justify-content:  space-between;
       flex-wrap: wrap;
    }
    .flex-item {
       width: 175px;
       height: 175px;
       background-color: grey;
       margin: 10px auto;
    }

    <div class="flexbox">
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
    </div>

The only problem might be if the last row would have more than one item but not enough to fill up the whole row, there will be a lot of space between the last row items.

The justify-content property uses the available space on the line to position flex items.

With justify-content: space-between, all available space is placed between the first and last items, pushing both items to opposite edges of the container.

You wrote:

I was wondering how to justify how much space is allowed in justify-content: space-between for flexbox.

With space-between in row-direction, you would have to control the width of the flex container. So if you want there to be less space between flex items, then you would need to shorten the width of the container.

Or you could use justify-content: space-around.

However, these solutions are suboptimal.

The right way to go about this would be to use margins.

You wrote:

Currently, my items are spaced but they have way too much space between them I want just a little space between them so they can settle somewhere in the middle in a row.

Use justify-content: center then use margins to space them apart.