使用 Flexbox 將元素左對齊和居中對齊

Question

我正在使用 Flexbox 來對齊我的子元素。我想做的是將一個元素居中，並使另一個元素靠左對齊。通常我會使用 margin-right: auto 設定左側元素。問題在於將中心元素推離中心。如果不使用絕對定位，這可能嗎？

HTML 與 CSS

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

<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>