html - 使用 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>