在flexbox项之间添加空间 [英] Adding space between flexbox items

问题描述

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

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 jsfiddle of what I'm trying to achieve.

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

推荐答案

您需要考虑一些事项.

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

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

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

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

下一步；您已将项目的宽度设置为50%.很好，您的item将是视口的50％.那是因为您的网格将隐式为视口的100％.但是由于图像溢出了框，因此您可以根据需要设置边距，它们会将项目分开，但是您需要大的边距才能实际看到它们.然后图像溢出.

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.

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

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

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

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;

.item { flex: 0 0 50%; }

这是什么的简写；

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

所以基本上你说；将我的物品放入容器的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.

现在您已经拥有了想要的东西，例如，可以使用margin-right: 20px在项目之间创建20px的空间.

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

完整摘要；

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

这篇关于在flexbox项之间添加空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！