justify-content：space-between，第一项和最后一项之间的空间相等[重复]

Question

我想用 flexbox 设置一个简单的 elastic* 网格...

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

...但是我希望外边距等于项目之间的间距。

*“弹性”是指宽度不固定。它们都是百分比，因此在不同的屏幕宽度下总宽度不同。

这似乎不是justify-content: space-between 的默认行为。它在每个项目“周围”生成相等的空间，但空间不会像边距那样折叠。所以结果是“中间”空间的宽度是最右边和最左边的两倍（假设你的 flex-direction 是row）。

在下面的草图中，第一张图是justify-content: space-between 自然所做的。注意宽度 A 和 B。第二张图是我想要的（只有一个一致的排水沟 C）。

flexbox 可以做到这一点吗？

更新

如果可能的话，我想避免添加“行”包装元素。伪元素解决方案听起来就像一张票（请参阅下面的答案），但让我们解决一下，以便项目可以是未确定的数字（并换行到新行）

Answer 1

您可以将space-between 与来自父级的伪元素一起使用

.flex {
  display: flex;
  width: 500px;
  border: 1px solid black;
  justify-content: space-between;
}
.flex > div {
  background: #eee;
  border: 1px solid #aaa;
  height: 100px; width: 100px;
}
.flex:before,.flex:after {
  content: '';
}

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

在item前后使用0宽度的伪元素怎么样？

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 1px solid #C55;
}

.column {
  flex: 1 20%;
  max-width: 20%;
  height: 100px;
  background: #C55;
}

.even:before, .even:after{
  content: '';
  display: block;
  width: 0;
}

no side spacing:
<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>
<br>
side spacing:
<div class="container even">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Answer 3

几个伪元素可以实现这一点：

flex-container {
  display: flex;
  justify-content: space-between;
  background-color: orangered;
}

flex-item {
  flex: 0 0 20%;
  height: 100px;
  margin: 5px 0;
  background-color: lightyellow;
}

flex-container::after {
  content: '';
}

flex-container::before {
  content: '';
}

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

大多数（如果不是全部）浏览器将 flex 容器上的伪元素解释为 flex 项。 ::before 伪是第一项，::after 是最后一项。

这是来自 Firefox 文档的参考：

In-flow ::after and ::before pseudo-elements are now flex items (bug 867454)。

上面的代码有效，因为justify-content: space-between 现在包含五个弹性项目，但第一个和最后一个宽度为 0。

我不确定这是否可以在具有纯 CSS 的 多行容器 (flex-wrap: wrap) 中工作。您可以尝试在弹性项目上使用auto 边距，而不是在容器上使用justify-content。否则，JavaScript。

Answer 4

您可以避免使用使用边距来定位元素的伪元素。

第一个元素是特殊情况，需要一个margin-left；所有其他人都只有margin-right。

但此解决方案不适用于启用换行。 （没有办法针对第二行及后续行的第一个元素）

.flex {
  display: flex;
  width: 500px;
  border: 1px solid black;
}

.flex > div {
  background: lightblue;
  height: 100px; 
  width: 100px;
  margin-right: auto;
}

.flex > div:first-child {
  margin-left: auto;
}

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 5

计算差异并将margin-left 添加到左侧元素，将margin-right 添加到右侧元素。虽然我知道您想要一个 HTML/CSS 解决方案，但您可以使用 JavaScript 来完成此操作，并使其具有完美的响应性，或者只是使用 HTML/CSS 感受页边距大小。

HTML

<div class="box" id="element"></div>
<div class="box"></div>
<div class="box"></div>

JS

window.addEventListener('load', setMargins);

var boxClass = document.getElementsByClassName('box');

function setMargins() {
    var element = document.getElementById('element');
    var widthOfElement = element.clientWidth;
    var sizeOfEachMargin = (window.innerWidth - (widthOfElement * 3)) / 4;

    for (var i = 0; i < boxClass.length; i++) {
        boxClass[i].style.marginLeft = sizeOfEachMargin + 'px';
    }
}