Flexbox css3 faz uma linha centrada responsiva? - css3, twitter-bootstrap-3, flexbox, capacidade de resposta

Eu tenho um exemplo de 3 caixas aqui todos horizontalmentecentrado e tentando torná-los responsivos, portanto, se a resolução cair, eles serão empilhados. Eu tentei fazer isso com flex box porque ele permite que qualquer caixa cresça e ainda se alinha. Originalmente eu coloquei as caixas na linha bootstrap 3 com o conjunto cols-lg (md etc), mas ele nunca iria desempacotá-las! (.wpr) na implementação será um banner, e é por isso que eu gostaria que as caixas posicionais estivessem alinhadas horizontalmente, sempre que possível.

Nota: A resposta não precisa usar o flexbox!

Aqui é o violino

HTML

<div class="wpr">
<div class="box" style="background-color: red;">A B C</div>
<div class="box" style="background-color: blue;">2</div>
<div class="box" style="background-color: pink;">3</div>
</div>

CSS

.wpr
{
width: 100%;
background: grey;
padding: 10px 30px;
display: flex;
justify-content: center; /* align horizontal */
align-items: top; /* align vertical */
}

div.box
{
width: 200px;
min-width: 200px;
float: left;
margin: 0 5px;
padding: 30px;
text-align: center;
color: white;
font-size: 72px;
min-height: 100px;
}

Respostas:

Você pode adicionar um flex-wrap: wrap; para .wpr como visto no meu demonstração.

Você só precisa adicionar o flex-wrap: wrap; propriedade para o .wpr classe.

.wpr
{
width: 100%;
background: grey;
padding: 10px 30px;
display: flex;
justify-content: center; /* align horizontal */
align-items: top; /* align vertical */
flex-wrap: wrap;  <===
}

http://jsfiddle.net/h4h75mnn/

Confira esta Pen @ Codepen para brincar com o flexbox: http://codepen.io/enxaneta/full/adLPwv/