Richten Sie Elemente mit Flexbox links und zentriert aus

Question

Ich verwende Flexbox, um meine untergeordneten Elemente auszurichten. Ich möchte ein Element zentrieren und das andere Element links ausrichten. Normalerweise würde ich margin-right: auto verwenden, um das linke Element festzulegen. Das Problem besteht darin, das mittlere Element von der Mitte wegzudrücken. Ist dies ohne absolute Positionierung möglich?

HTML und CSS

#parent {
  align-items: center;
  Rand: 1 Pixel einfarbig schwarz;
  Anzeige: Flex;
  rechtfertigen-Inhalt: Mitte;
  Rand: 0 automatisch;
  Breite: 500px;
}
#links {
  Rand rechts: auto;
}
#Center {
  Rand: automatisch;
}

<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
</div>

Answer 1

添加第三个空元素：

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

以及以下样式：

.parent {
  display: flex;
}
.left, .right {
  flex: 1;
}

只有左翼和右翼会成长，并且由于以下事实......

• 只有两个增长元素（如果为空也没关系）和
• 两者具有相同的宽度（它们将均匀分配可用空间）

...中心元素将始终完美居中。

在我看来，这比接受的答案要好得多，因为您不必将左侧内容复制到右侧并隐藏它以获得两侧相同的宽度，它只是神奇地发生（flexbox 很神奇）。

---

实际操作：

.parent {
  display: flex;
}

.left,
.right {
  flex: 1;
}


/* Styles for demonstration */
.parent {
  padding: 5px;
  border: 2px solid #000;
}
.left,
.right {
  padding: 3px;
  border: 2px solid red;
}
.center {
  margin: 0 3px;
  padding: 3px;
  border: 2px solid blue;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

Answer 2

编辑：请参阅下面的Solo 的答案，这是更好的解决方案。

---

flexbox 背后的想法是提供一个框架，用于轻松对齐容器内具有可变尺寸的元素。因此，提供一种完全忽略一个元素宽度的布局是没有意义的。从本质上讲，这正是绝对定位的用途，因为它将元素从正常流中取出。

据我所知，如果不使用 position:absolute; 就没有什么好的方法可以做到这一点，所以我建议使用它......但如果你真的不想这样做，或者无法使用绝对定位，那么我想您可以使用以下解决方法之一。

---

如果您知道“左”div 的确切宽度，那么您可以将 justify-content 更改为 flex-start（左），然后像这样对齐“居中”div：

#center {
    position: relative;
    margin: auto;
    left: -{half width of left div}px;
}

---

如果您不知道宽度，那么您可以在右侧复制“Left”，使用 justify-content: space- Between;，然后隐藏新的右侧元素： 需要明确的是，这真的非常难看......使用绝对定位比复制内容更好。 :-)

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 500px;
}
#right {
    opacity: 0;
}

<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
  <span id="right">Left</span>
</div>