html - 用 flexbox 将一个 child 固定在中间

Question

我正在尝试将每个“父级”的“子级特征”与带有 flexbox 的“容器”类的中心对齐。

这是我现在拥有的:

这是期望的输出:

这可能吗？

.parent {
  display: flex;
  align-items: flex-start;
  height: 100%;
  border-color: #3B8686;
  justify-content: center;
  margin-bottom: 1em;
  position: relative;
  z-index: 2;
}

.child {
  background-color: #79BD9A;
  border-color: #CFF09E;
  padding: 1em;
  text-align: center;
  margin: 0 0.1em
}

.child--featured {
  background-color: #3B8686;
}

.parent.one .child {
  width: 3em
}

.parent.one .child:nth-child(1) {
  width: 8em
}

.parent.one .child:nth-child(4) {
  width: 6em
}

.parent.two .child {
  width: 4em;
}

.parent.two .child:nth-child(1) {
  width: 1em
}

.parent.two .child:nth-child(2) {
  width: 5em
}

.parent.two .child:nth-child(3) {
  width: 6em
}

.parent.two .child:nth-child(4) {
  width: 5em
}

.parent.three .child {
  width: 2em
}

.parent.three .child:nth-child(4) {
  width: 5em
}

.parent.three .child:nth-child(3) {
  width: 2em
}

.parent.three .child:nth-child(2) {
  width: 10em
}

.parent.three .child:nth-child(1) {
  width: 10em
}

.rule {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 2px;
  background: #333;
  z-index: 1;
}

<div class="container">

  <p class="rule"></p>

  <div class="parent one">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child child--featured">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>

  <div class="parent two">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child child--featured">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>

  <div class="parent three">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child child--featured">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
  
</div>

Codepen

Answer 1

是的，这是可能的。我已经试过了，但我的脑袋已经出来了。但我已经做到了。你可以这样:

 
.parent.one {
     margin-left: -30px;
}
.parent.two {
    margin-left: 50px;
}
.parent.three {
    margin-left: -200px;
}