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

Posted 2023-03-17

【中文标题】Css flex - 一项在右侧，另一项在左侧空间居中

【英文标题】：Css flex - one item on the right, the other centered on the left space

【发布时间】：2017-10-26 07:24:10

【问题描述】：

我是 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 个项目（一个左一个右）。 我想知道如何执行以下操作：

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

谢谢！

【问题讨论】：

您能否提供一些 html 以及您想要实现的目标的图片？这将帮助我们确定问题所在。

寻求帮助的问题（“为什么此代码不起作用或如何使该代码起作用？”）必须包括所需的行为、特定问题或错误以及在问题本身中重现它所需的最短代码。没有明确的问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。

【参考方案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

【讨论】：

感谢非常详细的回答！真的很有帮助。

谢谢 - 很高兴它有帮助。如果答案解决了您的问题，请务必将其标记为已接受的答案，以便其他人可以遵循该解决方案。