Html 在 flexbox 项目之间添加空间

Adding space between flexbox items

提问by user2896120

I'm trying to create a horizontally scrollable div with flexbox. So far, I have most of it. However, the only problem I am facing is that I'm trying to add space to my items, but for some reason, nothing seems to be working. I've tried adding margin, padding, justifying content, etc. Here's a jsfiddleof what I'm trying to achieve.

我正在尝试使用 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>

回答by giorgio

There a few things you have to consider.

有几件事你必须考虑。

First of all; with justify-contentyou define how remaining space is handled. By using space-betweenyour items will be aligned so that the space between them is equal, by setting it to centerthe remaining space will be around all items, with all items stuck together.

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

In your case though, there is no remaining space, because your items actually stretch the div. So that doesn't help you.

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

Next; you've set the width of an item to 50%. Which is fine, your item's will be 50% of the viewport. That's because your grid will implicitly be 100% of the viewport. But because your image overflows the box, you can set margins if you want, and they will put the items further apart, but you need big-ass margins to actually see them. Bigger then the overflowing of your image.

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

So, to fix this, you make the images responsive by making them as width as the item;

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

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

But that poses another problem; flexbox tries to size it's flex items to fit it all into the flex container. So you'll see that it automatically resizes your items so they will all fit in. To fix this, you have to explicitly force the width of your items;

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

.item { flex: 0 0 50%; }

Which is a shorthand for;

这是的简写；

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

So basically you say; make my item 50% of it's container, and don't use your awesome algorithm to try to make it bigger or smaller.

所以基本上你说; 使我的项目占其容器的 50%，并且不要使用您很棒的算法来尝试将其放大或缩小。

Now you've got what you want, and you can use margin-right: 20pxfor example to create a 20px space between your items.

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

Full snippet;

完整片段；

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