Html Css flex-一项位于右侧，另一项位于左侧空间的中心

我是css新手，对flex更是新手。 我找不到答案，所以我开始了一个新的。。 我有以下容器和物品：

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .item {
    color: rgb(51, 51, 51);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

这样，我可以在两侧得到两个项目（一个左侧和一个右侧）。 我想知道如何做到以下几点：

左边的项目将像以前一样位于左边。从它结束的点，到容器结束的点-I，右元素居中

左边的项目将像以前一样位于左边。右侧项目将从容器右端向左10像素

---

谢谢

此问题的解决方案是使用嵌套的FlexBox。去掉

显示：块在
.item
上-您不能像那样混合使用flex和block显示规则

您要做的是设置一系列容器：


一个顶级flex容器
两个大小相等的柔性容器位于顶层容器内

标记将如下所示：

<main class="container">
  <section class="left-container">
    <div class="item"></div>
  </section>
  <section class="right-container">
    <div class="item"></div>
  </section>
</main>

在这两个嵌套容器中，您需要使它们都
display:flex也是。现在，您可以根据需要控制
.item
元素的位置<代码>对齐项目：居中
控制垂直轴，因此
。左侧容器
仅获取该位置，而右侧容器获取
对齐内容：居中以控制垂直对齐

.left-container {
  background-color: darkgray;
  display: flex;
  align-items: center;
  height: 200px;
  width: 50%;
}

.right-container {
  background-color: lightgray;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 50%;
}

项目的样式非常简单-我只是为了演示目的给出了高度和宽度。它们不是必需的。如果您想进行精确的调整，请使用
.item
上的
margin
稍微偏离这些标准

.item {
  background-color: red;
  height: 100px;
  width: 100px;
}


代码笔：
您能否提供一些HTML以及您想要实现的目标的图片？这将帮助我们确定问题是什么。寻求帮助的问题（“为什么该代码不起作用，或者如何使其起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现该代码所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：。感谢您提供非常详细的答案！真的很有帮助。谢谢-很高兴它有帮助。如果答案解决了您的问题，请确保将其标记为已接受的答案，以便其他人可以遵循该解决方案。
.item {
  background-color: red;
  height: 100px;
  width: 100px;
}