如何使用flexbox将一个元素放在中心，将另一个元素放在中心

Question

我参加了flexbox课程，正在练习。我想知道如何使用flexbox的良好做法来集中我的内容。这次，我想在容器的中心放置一个div，在容器的末尾放置一个div，但将其居中（如下图所示）。

我该怎么办？

这是我的代码：

<div  class="contenedor_ppal_card_flip">
  <div class="div_son center">
    center
  </div>
  <div class="div_son end">
    end
  </div>
</div>

.contenedor_ppal_card_flip{
  height:500px;
  width:100%;
  border:1px solid pink;  
  display:flex; 
  flex-direction: column; 
  justify-content: center;
  align-items: center;

}

.div_son{
  width: 100px; 
  height: 50px; 
  background: green;
  border:1px solid red;
  text-align:center;
  vertical-align:center;
  display:flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
}

.end{
  align-self:flex-end;
}

https://jsfiddle.net/56su3o97/