将元素与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;使用它没有很好的方法,所以我建议使用它...但如果你真的不想,或者不能使用绝对定位那么我想你可以使用一个以下变通办法.

如果您知道"Left"div的确切宽度,那么您可以更改justify-content为flex-start(left)然后将"Center"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>

Answer 3

我有另一个解决方案。在我看来，向中心元素添加一个空块很好，但从代码角度来说它有点难看。

.parent {
  display: flex;
}

.left {
  flex: 1;
}

.parent::after {
  flex: 1;
  content: '';
}

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

Answer 4

因为这个已经有 4 年了，我想我应该用一个更简单的 CSS 网格解决方案来更新它。

#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid black;
  margin: 0 auto;
  width: 500px;
}
#center {
  text-align: center;
}

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