Css 如何使用flexbox使两个元素居中？

这就是我想要的：

我想能够左中心两个elemenet使用flexbox。这将很容易做到（正如我在JSFIDLE中所展示的，如果我有第三个名为C的框，但我还没有找到一个使用flexbox解决上面图像的方法。有人吗

HTML:

---

JSFIDLE上的代码：

将以下样式添加到所有子容器中：

.parent div{
    flex:1;
}

该样式改变了flex box（对其可用）中元素将占用的空间（1=100%）或“占用您所能占用的100%”——在本例中，这将是父元素的50%

.parent {
   display: flex;
   border: 1px solid grey;
   justify-content: space-between;
}

.parent div{
    flex:1;
}