弯曲第一项居中，第二右或第一左第二中心

Question

他在那里，我正在尝试实现自定义伸缩位置。 例如，我有2个项目，第一个必须在左边，第二个必须居中，反之亦然，第一个必须在中心和第二个右边。

.left-center{
  display: flex;
  width: 100%;
  border:1px solid red;
  margin-bottom: 20px;
}

.left-center   .center{
    margin-left: auto;
    margin-right: auto;    
  }
  
  .center-right{
    display: flex;
    width: 100%;
    justify-content: flex-end;
    border:1px solid green;
  }
  
  .center-right .center{
    margin-left: auto;
    margin-right: auto;
  }

<div class="left-center">
  <div class="left">left</div>
  <div class="center">center</div>
</div>

<div class="center-right">
  <div class="center">center</div>
  <div class="right">right</div>
</div>