justify-content：空间 - 介于第一个和最后一个项目之间的空间相等

Question

我想使用flexbox设置一个简单的弹性*网格......

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

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

*＆＃34;弹性＆＃34;我的意思是宽度不固定。它们都是百分比，不同屏幕宽度的总宽度也不同。

这似乎不是justify-content: space-between的默认行为。它产生相同的空间＆＃34;周围＆＃34;每个项目，但空间不会像边距那样崩溃。结果就是＆＃34;之间的关系。空间是最右边和左边的两倍宽（假设你的弯曲方向是row）。

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

这可以用flexbox吗？

更新

我想避免添加＆＃34; row＆＃34;尽可能包裹元素。伪元素解决方案听起来就像票证（见下面的答案），但让我们解决这个问题，以便项目可以是一个未确定的数字（并换行到新行）

Answer 1

您可以将space-between与父

中的伪元素一起使用

＆＃13;

＆＃13;

.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: '';
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如何在项目之前和之后使用0宽度伪元素？

＆＃13;

＆＃13;

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

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

一些伪元素将实现这一目标：

＆＃13;

＆＃13;

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: '';
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

大多数（如果不是全部）浏览器将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

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

第一个元素是一个特例，需要一个边距左边;所有其他人只有保证金权利。

但是这个解决方案不适用于启用包装。 （无法定位第二行和后续行的第一个元素）

.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';
    }
}