html - 在网格中使用 flexbox 时在 div 之间添加空间

Question

我正在使用 flexbox 创建一个网格，并希望在每个 div 之间添加空间。例如:

但我不希望额外的空间出现在右侧和底部，因为这样结束的 div 就不会均匀地出现在容器中，我只需要 div 之间的间距。然后在调整大小时，这应该发生:

是否可以使用 flexbox 来实现？

我目前的尝试:

#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

在 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;
}