Html 在flexbox容器中，如何在不移动左侧div的情况下移动右侧div？

这是我的密码：

<div class="flex-container fb-jc-center fb-ai-center">
  <div>
      first div
  </div>
  <div>
      second div
  </div>
</div>

示例如下：

正如你所看到的，我的两个div完全居中，但我想移动右边的一个，而不移动左边的一个

我试过：

.flex-container > div:nth-child(2){
    margin-left: 20px;
}

但它不起作用，因为它也移动第一个div

我想我可以添加一个20像素宽的空元素：

<div class="flex-container fb-jc-center fb-ai-center">
  <div>
      first div
  </div>
  <div class="flex-container">
      <div id="empty"></div>
      <div>second div</div>
  </div>
</div>

有更简单的方法吗？

类似这样的方法

.flex容器{
显示器：flex；
}
.flex容器分区：第n个子项（1）{
位置：绝对位置；
}
.flex容器分区：第n个子项（2）{
左边距：自动；
}
.fb jc中心{
证明内容：中心；
}
.fb人工智能中心{
对齐项目：居中；
}
/*下面的CSS只是示例样式*/
.柔性容器{
最小高度：300px；
最小宽度：500px；
边框：1px纯黑；
}
#蓝色的{
背景颜色：蓝色；
}
#红色的{
背景色：红色；
}
.flex容器>div{
字体大小：25px；
填充物：5px10px；
}

第一组
第二组

要将

#红色

向右移动而不丢失

#蓝色

的位置，请为选择器

.flex container>div设置规则
左边距

此解决方案的秘密是将此css规则同时应用于
div
，这意味着
#blue
div的左边距得到补偿。
您好，请在输入代码时使用snippet。没有必要为此使用JSFIDLE。。。对于您的问题，您是否尝试过在您的第二个flex项目上使用
右边距：-20px
？您好@Amaury Hanser，由于您的评论，我现在尝试过，但它将第一个div移到了右边，我想保持它不移动添加
左边距
。flex container>div
@s.Kuznetsov，谢谢。把你的答案贴出来，我会接受的
<div class="flex-container fb-jc-center fb-ai-center">
  <div>
      first div
  </div>
  <div class="flex-container">
      <div id="empty"></div>
      <div>second div</div>
  </div>
</div>

#empty{
   width:20px;
}