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

Question

这就是我想要的：

我希望能够使用 flexbox 使两个元素居中。这样做很容易（正如我在 jsfiddle 中所展示的，如果我有第三个名为 C 的盒子，但我还没有找到使用 flexbox 解决上面图像的方法。有人吗？

HTML：

<div class="parent">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>

CSS：

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

jsfiddle上的代码：http: //jsfiddle.net/3DD6E/

Answer 1

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

.parent div{
    flex:1;
}

flex样式改变了元素将占用（1=100%）或“占用 100% 的空间”的 flex 框（可用）内的空间——在本例中为 50 %父母。

JSFiddle