Css flex - 一项在右侧，另一项在左侧空间居中

Question

我是 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;
  }

这样我在两边都得到了 2 个项目（一个左一个右）。 我想知道如何执行以下操作：

1. 左边的项目，将像以前一样在左边。从它结束的点到容器结束的点 - I 与要居中的正确元素。
2. 左边的项目，将像以前一样在左边。右边的项目将距离容器右端 10 像素。

谢谢！

Answer 1

解决这个问题的方法是使用嵌套的弹性盒。去掉 .item 上的 display: block; - 你不能像这样混合使用 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>

在 CSS 层中，您提供顶级 .container flex 和 justify-content: space-between，它将容器推到两侧。

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

在两个嵌套容器中，您还需要将它们都设为display: flex;。现在您可以随意控制.item 元素的位置。 align-items: center 控制垂直轴，因此 .left-container 仅获得该定位，而右侧容器获得 justify-content: center; 控制垂直对齐。

.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;
}

代码笔： https://codepen.io/staypuftman/pen/PmLyNM