CSS在具有多个跨距的div之间获得相等的间距

我有一组

div

s，每个当前都有两个

span

s，其中包含文本。他们目前生活在一个flexbox中，生活得非常幸福。我工作的设计师希望文本的“块”彼此相隔24px。问题是24px应该在较长跨度的末端启动。这可能吗

如下图所示，间距从较长文本的右侧开始，并在其旁边的文本块的开始处结束。由于跨度具有不同的长度，下一个块的起始位置将不均匀。这是我提出来的，但这是指令

代码如下所示

   <div class="wrapper">
          <div>
            <span>
              <Trans>Ref Code</Trans>
            </span>
            <span>{me.advisor.referralCode}</span>
          </div>
          <div>
            <span>
              <Trans>State/Province</Trans>
            </span>
            <span>
              <Trans>{postalCodeToProvince(me.advisor.postalCode)}</Trans>
            </span>
          </div>
          <div>
            <span>
              <Trans>Plan</Trans>
            </span>
            <span>
              <Trans>{products}</Trans>
            </span>
          </div>
          <div>
            <span>
              <Trans>Create on</Trans>
            </span>
            <span>{moment(me.advisor.stripeCreatedAt).format('YYYY-MM-DD')}</span>
          </div>
          <div>
            <span>
              <Trans>Next User Date</Trans>
            </span>
            <span>{me.advisor.nextAssignment.details.on ? me.advisor.nextAssignment.details.on : "Expired"}</span>
          </div>
          <div>
            <span>
              <Trans>Status</Trans>
            </span>
            <span>
              <Trans>{me.advisor.status}</Trans>
            </span>
          </div>
         </div>

参考代码
{me.advisor.referralCode}
州/省
{PostalCodeProvience（me.advisor.postalCode）}
计划
{产品}
创造
{矩（me.advisor.stripeCreatedAt）.format（'YYYY-MM-DD'）}
下一个用户日期
{me.advisor.nextAssignment.details.on？me.advisor.nextAssignment.details.on:“过期”}
地位
{me.advisor.status}

---

将这些设置应用于flex子项（并删除其他设置），然后删除

调整内容：均匀间隔从
.wrapper
：

.wrapper>div {
  display: flex;
  flex-direction: column;
  margin-right: 24px;
}


.wrapper{
显示器：flex；
柔性包装：包装；
边缘顶端：54px；
左边距：64px；
最大宽度：80%；
}
.wrapper>div{
显示器：flex；
弯曲方向：立柱；
右边距：24px；
页边距顶部：12px；/*所需的任何设置*/
}
.wrapper>div span:第一个子级{
字体系列：“Lato”，无衬线；
字体大小：粗体；
颜色：#3c4142；
字体大小：12px；
显示：块；
}
.wrapper>div span:n个子项（2）{
位置：相对位置；
顶部：6px；
字体系列：“Lato”，无衬线；
字体大小：16px；
颜色：#a5aeb0；
文本转换：大写；
}

参考代码
001209832u1
州/省
安大略
计划
有趣的计划
创造
2020-09-14
下一个用户日期
期满
地位
死去的
将这些设置应用于flex子项（并删除其他设置），然后删除
调整内容：均匀间隔从
.wrapper
：

.wrapper>div {
  display: flex;
  flex-direction: column;
  margin-right: 24px;
}


.wrapper{
显示器：flex；
柔性包装：包装；
边缘顶端：54px；
左边距：64px；
最大宽度：80%；
}
.wrapper>div{
显示器：flex；
弯曲方向：立柱；
右边距：24px；
页边距顶部：12px；/*所需的任何设置*/
}
.wrapper>div span:第一个子级{
字体系列：“Lato”，无衬线；
字体大小：粗体；
颜色：#3c4142；
字体大小：12px；
显示：块；
}
.wrapper>div span:n个子项（2）{
位置：相对位置；
顶部：6px；
字体系列：“Lato”，无衬线；
字体大小：16px；
颜色：#a5aeb0；
文本转换：大写；
}

参考代码
001209832u1
州/省
安大略
计划
有趣的计划
创造
2020-09-14
下一个用户日期
期满
地位
死去的
您可以使用flexbox的
间隙
属性设置列之间的间距。添加
gap:24px并删除
调整内容
和
flex
，如下所示

.wrapper{
间隙：24px；
/*对正内容：空间均匀*/
div{
/*弹性：0.16%*/
}
}
您可以使用flexbox的
间隙
属性设置列之间的间距。添加
gap:24px并删除
调整内容
和
flex
，如下所示

.wrapper{
间隙：24px；
/*对正内容：空间均匀*/
div{
/*弹性：0.16%*/
}
}
这不起作用。虽然我很高兴了解gap。在这之前我从来没有想到过这不起作用。虽然我很高兴了解gap。我以前从来没有想到过