Adding space between divs when using flexbox in a grid

Question

I am using flexbox to create a grid and wish to add space between each div. For example:

But I do not want the extra space to show up on the right side and bottom because then the end divs would not be even in the container, I just need the spacing in between the divs. And then on resizing, this should happen:

Is it possible to have this using flexbox?

My current attempt at it:

#feature-box-container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 30px;
}

.feature-box {
  display: inline-flex;
  flex-grow: 1;
  width: 300px;
  padding: 12px;
  color: grey;
  border: 1px solid #4F5B93;
  border-radius: 8px;
}

.feature-box img {
  height: 48px;
  width: auto;
  margin-right: 18px;
}

.feature-box p {
  word-wrap: break-word;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<div id="feature-box-container">

  <div class="feature-box">

    <img src="images/router-icon.png">

    <p>Something would go here. Something would go here. Something would go here.</div>

  <div class="feature-box">

    <img src="images/template-icon.png">

    <p>Something would go here. Something would go here. </p>

  </div>

  <div class="feature-box">

    <img src="images/security-icon.png">

    <p>Something would go here. Something would go here. Something would go here. Something would go here. </p>

  </div>

  <div class="feature-box">

    <img src="images/ssl-icon.png">

    <p>Something would go here. Something would go here. </p>

  </div>

  <div class="feature-box">

    <img src="images/data-access-icon.png">

    <p>Something would go here. Something would go here. Something would go here. </p>

  </div>

  <div class="feature-box">

    <img src="images/notification-icon.png">

    <p>Support for notifications and email delivery.</p>

  </div>

</div>

Answer 1

Add margin to child div check snippet.

#feature-box-container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 30px;
}

.feature-box {
  display: inline-flex;
  flex-grow: 1;
  width: 300px;
  padding: 12px;
  color: grey;
  border: 1px solid #4F5B93;
  border-radius: 8px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.feature-box:nth-child(3n) {
  margin-right: 0px;
}

.feature-box img {
  height: 48px;
  width: auto;
  margin-right: 18px;
}

.feature-box p {
  word-wrap: break-word;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

@media only screen and (max-width: 1070px) {
  .feature-box:nth-child(3n) {
  margin-right: 10px;
}
  .feature-box:nth-child(even) {
  margin-right: 0px;
}
}

@media only screen and (max-width: 737px) {
  .feature-box{
  margin-right: 0px !important;
}
}

<div id="feature-box-container">

  <div class="feature-box">

    <img src="images/router-icon.png">

    <p>Something would go here. Something would go here. Something would go here.</div>

  <div class="feature-box">

    <img src="images/template-icon.png">

    <p>Something would go here. Something would go here. </p>

  </div>

  <div class="feature-box">

    <img src="images/security-icon.png">

    <p>Something would go here. Something would go here. Something would go here. Something would go here. </p>

  </div>

  <div class="feature-box">

    <img src="images/ssl-icon.png">

    <p>Something would go here. Something would go here. </p>

  </div>

  <div class="feature-box">

    <img src="images/data-access-icon.png">

    <p>Something would go here. Something would go here. Something would go here. </p>

  </div>

  <div class="feature-box">

    <img src="images/notification-icon.png">

    <p>Support for notifications and email delivery.</p>

  </div>

</div>

Answer 2

Add margin on feature-box margin: 0 5px 5px;

.feature-box
{
    display: inline-flex;
    flex-grow: 1;
    width: 300px;
    padding: 12px;
    margin: 0 5px 5px;
    color: grey;
    border: 1px solid #4F5B93;
    border-radius: 8px;
}