Question

我想知道如何证明justify-content: space-between中Flexbox允许的空间大小。

目前，我的物品是间隔的但是它们之间的空间太大我想要它们之间只有一点空间，所以它们可以在中间的某个地方连续安置。

下面的代码段有望澄清我正在努力解决的问题。

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

#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，您必须控制Flex容器的宽度。因此，如果您希望flex项之间的空间更小，则需要缩短容器的宽度。

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

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

正确的方法是使用边距。

您写道：

目前，我的物品是间隔的但是它们之间的空间太大我想要它们之间只有一点空间，所以它们可以在中间的某个地方连续安置。

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

Answer 2

如果要使用space-between，则使用边距的方法不是通用的解决方案，因为它会在所有flex-elements以及行或列的第一个和最后一个元素上设置一个边距。设置:first-child时，使用:last-child / :nth-child() / flex-wrap: wrap选择器无济于事，因为您永远无法确定在换行或列中第一个和最后一个元素。

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

所以我的结论是，当您真正想要释放Flexbox的灵活性和响应能力时，您将无法控制利润率……我会说错规格的机会。

Answer 3

我的解决方案是：

将虚拟空div放入其中，并指定最大高度
将空格更改为flex-start
将内容块设置为nogrow
将虚拟div设置为

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

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;

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

5 个答案: