Flexbox 2列，但间距为3

Question

我正在寻找一种方法

我内部有一个主要div，另外2个是内部

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

<div class="main">
  <div>Goes in the Middle</div>
  <div>Goes on the right</div>
</div>

我需要的是两个div之间的空间，好像它有3 div但只有2 div。

如何在没有3个div的情况下使用flex做到这一点？

Answer 1

只需将div的宽度设置为33.33333%：

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

.main>div {
  width: 33.3333%;
  /* below for test only */
  border: 1px solid red;
  box-sizing: border-box;
}

/* to push first div into middle - if you want it on left, remove this */
.main>div:first-child {
  margin-left:auto;
}

<div class="main">
  <div>Goes in the Middle</div>
  <div>Goes on the right</div>
</div>