如何使用css flexbox将标题置于标题中心

Question

我正在使用css flexbox构建一个简单的标头。标题有两个元素，左边的链接带有箭头，标题必须位于header的中心。

这是一个codepen演示：https://codepen.io/anon/pen/VzmZxg

这是css

.header {
  display: flex;
  background: red;
  flex-direction: row;
  align-items: baseline;
}

.header__link {
  flex-shrink: 1;
  align-self: center;
  height: 25px;
  padding: 15px 10px;
}

.header__title {
  flex-grow: 1;
  text-align: center;
}

正如您在演示中所看到的，标题位于他自己的块的中心，而不是所有header元素。

有没有办法用相同的html和使用css flexbox实现它？

如果您编辑代码笔，我可以接受答案。