html - 在 flexbox 元素之间添加空间

Question

我正在尝试使用 flexbox 创建一个可水平滚动的 div。到目前为止，我拥有大部分。但是，我面临的唯一问题是我正在尝试为我的元素添加空间，但由于某种原因，似乎没有任何效果。我尝试添加边距、填充、对齐内容等。这是 jsfiddle我正在努力实现的目标。

    .grid {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-bottom: 20px;
      justify-content: space-between;
    }
    
    /*Each item is one column*/
    
    .item {
      width: 50%;
    }
    
    .article-scroll-mobile {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      flex-wrap: nowrap;
      text-align: center;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      /*For iOS smooth scroll effect*/
    }

 <div class="grid article-scroll-mobile">
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">
      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">
    
      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">
    
      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">
    
      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">
    
      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">
    
      </div>
    </div>

Answer 1

有 column-gap 调整元素之间的行间距。

.form-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  column-gap: 0.875rem;
}