这有点棘手，但是你可以做一些变通的工作，比如把第二个方框的位置变成绝对的，这样蓝色方框就会居中了-或者我认为是一个更简单优雅的解决方案-给蓝色方框一个和红色方框一样大的左边边距-

null

.container {
  display: flex;
  flex-direction: row; 
    justify-content: center;
  align-items: center;
}

.box.right-item {
  background: red;
  width: 200px;
}

.box.left {
  background: blue;
  width: 200px;
  height: 20px;  
  margin-left:200px;
}

<div class="container">
  <div class="box left">
    xx
  </div>
  <div class="box right-item">
    yy
  </div>
</div>

如果您想在保持justify-content:center的同时将蓝色项居中，您需要将两项的中心点都定位到其原始位置的右侧100px，这意味着添加position:relative； 左:100px；到两个项目。 或者，您可以尝试使用Margin-left。

没有直接的方法把一个项目放在中间，同时把另一个推到最后。 您可以使用grid来实现，但是对于flex，上面的方法也可以。

null

.container {
  display: flex;
  flex-direction: row; 
  align-items: center;
  justify-content: center;
}

.box.right-item {
  background: red;
  width: 200px;
  position: relative;
  left: 100px;
}

.box.left {
  background: blue;
  width: 200px;
  height: 20px;
  position: relative;
  left: 100px;
}

<div class="container">
  <div class="box left">
    xx
  </div>
  <div class="box right-item">
    yy
  </div>
</div>

只需对.box.left使用Margin-left:calc(50%-100px)；即可将蓝色框居中。

null

.container {
  display: flex;
  flex-direction: row; 
  align-items: center;
}

.box.right-item {
  background: red;
  width: 200px;
}

.box.left {
  background: blue;
  width: 200px;
  height: 20px; 
  margin-left: calc(50% - 100px);
  /*                        ↑ half of the width */
}

<div class="container">
  <div class="box left">
    xx
  </div>
  <div class="box right-item">
    yy
  </div>
</div>