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

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

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

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

如果您知道 "Left" div 的确切宽度，那么您可以将 justify-content 更改为 flex-start (左）然后像这样对齐 "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 2

据我所知，这可以通过以下代码实现。

https://jsfiddle.net/u5gonp0a/

.box {
    display: flex;
    justify-content: center;
    background-color: green;
    text-align: left;
}

.left {
    padding: 10px;
    background-color: pink;
}

.center {
    padding: 10px;
    background-color: yellow;
    margin: 0 auto;
}

<div class="box">
    <div class="left">left</div>
    <div class="center">center</div>
</div>

Answer 3

如果你不想依赖定位，我发现让它真正居中的唯一方法是结合使用自动边距和负边距防止居中元素被左边推倒对齐的元素。不过，这需要您知道左对齐元素的确切宽度。

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: center;
}

.block {
  width: 120px;
  background: tomato;
}

.justify-start {
  margin-right: auto;
}

.justify-center {
  margin-right: auto;
  margin-left: -120px;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block justify-center"></div>
</div>

Answer 4

尝试这个没有黑客:)

CSS

.container{
  width: 500px;
  margin: 0 auto;
}
.box{
  display: flex;
  align-items: center;/* just in case*/
  justify-content: space-between;
}
.box p:nth-child(2){
  text-align: center;
  background-color: lime;
  flex: 1 1 0px;
}

HTML

<div class="container">
  <div class="box">
    <p>One</p>
    <p>Two</p>
  </div>
</div>

http://codepen.io/whisher/pen/XpGaEZ

Answer 5

添加第三个空元素：

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

只有左侧和右侧会增长，多亏了...

只有两个增长元素（如果为空则无所谓）和
两者的宽度相同（它们会平均分配可用 space）

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

在我看来，这比公认的答案要好得多，因为您不必将左侧内容复制到右侧并隐藏它以获得两侧相同的宽度，它只是神奇地发生了（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 6

.parent {
  display: flex;
}

.left {
  flex: 1;
}

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

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

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

Answer 7

因为这是 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>

Answer 8

如果你有一个网格系统，你可以用它来做你想做的事，而不需要“额外的”css。

下面有bootstrap(V4.X)
注意：它在引擎盖下使用 flex

<div class="row">
  <div class="col text-left">left</col>
  <div class="col text-center">center</col>
  <div class="col text-right">right</col>
</div>

文档bootstrap：https://getbootstrap.com/docs/4.6/layout/grid/

瞧瞧！ :)

Answer 9

解决方案 1： 给中心元素 50% 的宽度并使用 justify-content:space-between

#parent {
  display: flex;
  justify-content: space-between;
}

#center {
  flex-basis: 50%;
}

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

解决方案 2： 添加一个虚拟元素并将其隐藏。

#parent {
  display: flex;
  justify-content: space-between;
}

#right {
 visibility:hidden;
}

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

使用 flexbox 将元素左对齐和居中对齐

Aligning elements left and center with flexbox

html

css

flexbox

进行中：