Question

鉴于此scss / css：

div.container {
  display:flex;
  flex-flow: row wrap;
  justify-content:space-between;
  border: 1px solid blue;
  div {
    width: 200px;
    border: 1px solid gray;
    display:inline-block;
    text-align: center;
  }
}

此布局将每行中的第一个项目对齐到左侧，最后一个项目根据需要与右侧对齐。 Here is a codepen illustrating

随着浏览器窗口变窄，分布式div元素将靠近在一起，直到它们触摸，此时它们将被重新排列在另一行上。同样，每行的第一个div左对齐，最后一个对齐，右边有空格。

有没有办法设置最小间距，以便内部div元素之间总是有间隙。

填充和边距可能不起作用，作为对齐

<-- 1st left in row和last right in row -->不会成立。

Answer 1

该党迟到了，但我遇到了同样的问题。我解决它的方式可能不适合每个人，但这里适合那些可以使用它的人。

基本思想是你的最小差距为x。您将每个项目的左右边距设置为x/2，以便项目之间的距离为x（边距+边距）。然后将所有项目包装在一个左右边距为-x/2的容器中。这将隐藏每行边缘项目的边距。

这是一个有效的例子：

＆＃13;

.box {
  border: 1px solid black;
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 -1em;
}

.item {
  display: flex;
  border: 1px solid grey;
  padding: 1em;
  width: 20%;
  margin: 0 1em;
}

＆＃13;

<div class="box">
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</div>

＆＃13;

overflow-x: hidden;上的.box是为了防止由于边距溢出而出现在某些浏览器中的水平滚动条。

如果您希望间隙始终保持一致，并且对于只有一个项目的行，该项目会跨越整行，那么您可以将flex-grow: 1添加到.item。

Answer 2

您可以使用flex样式添加另一个div，以保持内部div之间所需的间隔。对于该间隙的最小宽度，请使用此属性（如W3Schools.com中所述）：

flex：flex-grow flex-shrink flex-basis | auto | initial | inherit;

哪个flex-shrink是：

flex-shrink：一个数字，指定项目相对于其他灵活项目缩小的程度

所以，例如你为gap div设置了这个css代码：

flex: 1 0 10px;

告诉gap div将具有10px宽度，并且相对于其他灵活项目将增长，但不会收缩。因此，在屏幕最窄的宽度处，最小宽度为10px。

Answer 3

使用百分比设置弹性基础也可以解决问题。那么它们之间的最小间隔也将以百分比表示。例如，对于3个元素，flex：0 0 30％将允许元素之间保留10％的固定空间。包含6个元素，flex：0 0 15％，依此类推。

Answer 4

问这个问题已经过了几天，但是我认为如果有人过去并且遇到同样的问题，我应该添加我的解决方案。

我建议使用calc，width和media解决此问题。是的，这是一项小工作，但我认为这是一种视觉清洁的解决方案。

.main{
  display:         flex;
  justify-content: space-between;
  flex-wrap:       wrap;
}
.main > div{
  width: 100%;
  height: 125px;
  border: 1px solid red;
}

@media (min-width: 576px) {
  .main > div{
    width: calc(100% / 2 - 5px);
    margin-bottom: 5px;
  }
}
@media (min-width: 992px) {
  .main > div{
    width: calc(100% / 3 - 5px);
  }
}
@media (min-width: 1140px) {
  .main > div{
    width: calc(100% / 6 - 5px);
    margin-bottom: 0;
  }
}

<div class="main">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

对于所需的断点，我计算希望div使用的宽度并减去我希望它们具有的空间。

我希望这对某人有帮助，并且我对此进行了解释。

致谢。

Answer 5

尝试下面的CSS。希望这会有所帮助。

div.container {
  position:absolute;
  border: 1px solid blue;
  div {
    width: 200px;
    margin:0px;
    border: 1px solid gray;
    display: inline-block;
    text-align: center;
  }
}

flexbox：

5 个答案: