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

原文由 Carl Edwards 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑： 请参阅下面 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>

原文由 pschueller 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

添加第三个空元素：

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

原文由 Solo 发布，翻译遵循 CC BY-SA 3.0 许可协议