Прикрепите одного ребенка в центре с помощью flexbox

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

Да, это возможно Я попробовал это, и моя голова отсутствует. Но я сделал это. Вам может понравиться это:

</p>

<pre><code>.parent.one {
     margin-left: -30px;
}
.parent.two {
    margin-left: 50px;
}
.parent.three {
    margin-left: -200px;
}
</code>