在 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

您需要考虑一些事项。

首先；使用justify-content，您可以定义如何处理剩余空间。通过使用space-between，您的项目将对齐，以便它们之间的空间相等，通过将其设置为center，剩余空间将围绕所有项目，所有项目都粘在一起。

但在您的情况下，没有剩余空间，因为您的项目实际上拉伸了 div。所以这对你没有帮助。

下一个；您已将项目的宽度设置为50%。这很好，您的item 将占视口的 50%。那是因为您的网格将隐含 100% 的视口。但是由于您的图像溢出了框，您可以根据需要设置边距，它们会将项目分开得更远，但您需要大边距才能真正看到它们。比你的图像溢出更大。

因此，要解决此问题，您可以通过使图像与项目一样宽来使图像具有响应性；

.item img { display: block; height: auto; width: 100%; }

但这带来了另一个问题； flexbox 尝试调整它的弹性项目的大小以使其全部适合弹性容器。所以你会看到它会自动调整你的项目的大小，以便它们都适合。要解决这个问题，你必须明确地强制你的项目的宽度；

.item { flex: 0 0 50%; }

这是一个简写;

.item { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; }

所以基本上你说；使我的物品占其容器的 50%，不要使用您的出色算法来尝试使其变大或变小。

现在你已经得到了你想要的，你可以使用margin-right: 20px在你的项目之间创建一个 20px 的空间。

完整的sn-p；

.grid { display: flex; width: 100%; }

.item { flex: 0 0 50%; margin-right: 20px; }
.item img { display: block; height: auto; width: 100%; }

.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 2

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

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