css - 如何使用 display flex 将一个元素定位在中心

Question

我有一个带有 div 元素的容器

.container {
  display: flex;
  justify-content: space-between;
}

如何使一个元素位于此 block 的中心，而其他元素位于space-between。

.container {
  display: flex;
  justify-content: space-between;
}

.container div {
  height: 50px;
}

.one,
.four,
.seven {
  background-color: red;
  width: 200px;
}

.two,
.six {
  background-color: green;
  width: 100px;
}

.three,
.five {
  background-color: yellow;
  width: 150px;
}

.center {
  width: 300px;
  background-color: black;
}

<div class="container">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="center"></div>
  <div class="four"></div>
  <div class="five"></div>
  <div class="six"></div>
  <div class="seven"></div>
</div>

jsFiddle

Answer 1

根据您希望它的动态程度，这里建议包装 center 元素左侧和右侧的元素。

left 和 right 分别减去 center 的宽度(每边 150px)减去 50%，这将放置 center在中间。

Updated fiddle

堆栈片段

.container {
  display: flex;
  justify-content: space-between;
}

.container div {
  height: 50px;
}

.left, .right {
  display: flex;
  justify-content: space-between;
  flex-basis: calc(50% - 150px);
}

.one,
.four,
.seven {
  background-color: red;
  flex-basis: 200px;
}

.two,
.six {
  background-color: green;
  flex-basis: 100px;
}

.three,
.five {
  background-color: yellow;
  flex-basis: 150px;
}

.center {
  flex-basis: 300px;
  background-color: black;
}

<div class="container">

  <div class="left">
    <div class="one">
    </div>
    <div class="two">
    </div>
    <div class="three">
    </div>
  </div>

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

  <div class="right">
    <div class="four">
    </div>
    <div class="five">
    </div>
    <div class="six">
    </div>
    <div class="seven">
    </div>
  </div>

</div>

---

通过向每个侧包装器添加一个伪，我们还可以使其行为类似于 space-between 在没有包装器的情况下的工作方式(尽管仍然以 center 为中心)。

在此fiddle demo (在 Stack 片段下方)我更改了宽度，以便更容易看到它在全屏下的表现。

.container {
  display: flex;
  justify-content: space-between;
}

.container div {
  height: 50px;
}

.left, .right {
  display: flex;
  justify-content: space-between;
  flex-basis: calc(50% - 100px);
}

.left::after,
.right::before {
  content: '';
}

.one,
.four,
.seven {
  background-color: red;
  flex-basis: 125px;
}

.two,
.six {
  background-color: green;
  flex-basis: 25px;
}

.three,
.five {
  background-color: yellow;
  flex-basis: 75px;
}

.center {
  flex-basis: 200px;
  background-color: black;
}

<div class="container">

  <div class="left">
    <div class="one">
    </div>
    <div class="two">
    </div>
    <div class="three">
    </div>
  </div>

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

  <div class="right">
    <div class="four">
    </div>
    <div class="five">
    </div>
    <div class="six">
    </div>
    <div class="seven">
    </div>
  </div>

</div>