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. 左侧项目将像以前一样位于左侧。从它结束的点到容器结束的点 - 我用正确的元素集中。
2. 左侧项目将像以前一样位于左侧。正确的项目将是容器右端10px左右。

谢谢！

Answer 1

此问题的解决方案是使用嵌套的flexbox。摆脱display: block;上的.item - 你不能混合使用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%;
}

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

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

Codepen： https://codepen.io/staypuftman/pen/PmLyNM