控制 justify-content: space-between 中的空间量

Question

我想知道如何证明在 justify-content: space-between 中允许有多少空间用于 flexbox。

目前，我的物品是隔开的，但它们之间的空间太大，我希望它们之间有一点空间，这样它们就可以连续放置在中间的某个地方。

下面的 sn-p 有望阐明我正在努力解决的问题。

如果您需要我进一步澄清，请告诉我。谢谢！

#qwrapper {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.row {
  flex: 0 auto;
  height: 100px;
  margin: 0;
}
#lighticon {
  padding-bottom: 30px;
}
@media (max-width: 800px) {
  #qwrapper {
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 480px) {
  #qwrapper {
    flex-wrap: wrap;
  }
  .row {}
}
@media only screen and (min-width: 760px) {
  #qwrapper {
    justify-content: space-between;
    margin: 10px;
  }
  #lighticon {
    position: relative;
    margin-left: 100px;
  }
}

<div id="qwrapper">

  <h3 id="michelle" class="row">"She always thinks of her clients."
<br>
   
</h3>

  <img src="https://cdn4.iconfinder.com/data/icons/black-icon-social-media/512/099310-feedburner-logo.png" class="row" alt="" id="lighticon" />

  <h3 id="jerry" class="row">"Very smart, creative person, problem solver."
<br>


</h3>
</div>

Answer 1

justify-content 属性使用行上的可用空间来定位弹性项目。

使用justify-content: space-between，所有可用空间都放在第一个和最后一个项目之间，将两个项目推到容器的相对边缘。

你写的：

我想知道如何证明在 justify-content: space-between 中允许多少空间用于 flexbox。

在行方向使用space-between，您必须控制弹性容器的宽度。因此，如果您希望弹性项目之间的空间更小，则需要缩短容器的宽度。

或者你可以使用justify-content: space-around。

但是，这些解决方案并不理想。

解决这个问题的正确方法是使用边距。

你写的：

目前，我的物品是隔开的，但它们之间的空间太大了，我希望它们之间有一点空间，这样它们就可以连续放置在中间的某个地方。

使用justify-content: center，然后使用边距将它们分开。

Answer 2

我的解决方案是：

• 将虚拟的空 div 置于指定的最大高度之间
• 将 space-between 更改为 flex-start
• 将内容块设置为 nog​​row
• 设置虚拟 div 增长

然后空间增长到指定的最大值。

Answer 3

如果你想要space-between，使用边距的方法不是一个通用的解决方案，因为它会在所有弹性元素上设置边距，也会在行或列的第一个和最后一个元素上设置一个边距。使用 :first-child / :last-child/ :nth-child() 选择器在设置 flex-wrap: wrap 时没有帮助，因为您永远无法判断哪些元素将在换行的行或列上排在第一个和最后一个。

:wrapped 这样的选择器会有所帮助，但遗憾的是它不存在。

所以我的结论是，当您真正想要释放 flexbox 的灵活性和响应能力时，您无法控制边距……错过了我想说的规范的机会。

Answer 4

我发现自己为所有框添加了右边距（在本例中为三个）

.three {
    margin-right: 2%
}

然后去掉它，使最后一个框对齐

.three:nth-child(3) {
    margin-right: 0%;
}

但每次我这样做时，我都会想“必须有更好的方法，在 flex-box 中加入一些东西……这可行，但似乎是一种解决方法？

Answer 5

以下组合对我有用。 （最初由@T04435提到）

justify-content: space-around; flex-items: margin-left;