Question

我试图用flexbox创建一个可水平滚动的div。到目前为止，我已经掌握了大部分内容。然而，我面临的唯一问题是我试图为我的物品添加空间，但由于某种原因，似乎没有任何效果。我尝试过添加保证金，填充，证明内容等等。这是我想要实现的jsfiddle。

＆＃13;

    .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*/
    }

＆＃13;

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

＆＃13;

Answer 1

你必须考虑一些事情。

首先;使用justify-content定义剩余空间的处理方式。使用space-between，您的商品将会对齐，以便它们之间的空间相等，通过将其设置为center，剩余空间将围绕所有商品，所有商品都会粘在一起。

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

下一步;您已将项目的宽度设置为50%。哪个没问题，你的item将是视口的50％。那是因为你的网格隐含地是视口的100％。但是因为您的图像溢出了框，您可以根据需要设置边距，并且它们会将项目分开，但是您需要大量的边距来实际看到它们。然后更大的图像溢出。

因此，为了解决这个问题，您可以通过将图像作为项目的宽度来使图像响应;

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

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

.item { flex: 0 0 50%; }

这是简写;

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

所以基本上你说;使我的物品占其容器的50％，并且不要使用你真棒的算法来使它变得更大或更小。

现在你已经得到了你想要的东西，你可以使用margin-right: 20px在你的物品之间创建一个20像素的空间。

完整摘录;

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

在flexbox项之间添加空间

2 个答案: