Flexbox css3制作响应居中的排？

Question

我有一个3盒的例子，在这里所有的水平居中，并试图使他们响应，所以如果分辨率下降，他们将堆叠。我试过用flex盒做这个，因为它允许任何盒子增长并且仍然排队。最初，我把这些盒子放在引导3行的cols-lg（md etc）中，但它永远不会将它们拆散！外包装（.wpr）将在实施中成为横幅，这就是为什么我希望位置盒在可能的情况下水平对齐的原因。

注意：答案不必使用flexbox！

Here is the fiddle

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; 
} 

Answer 1

您可以将flex-wrap: wrap;添加到.wpr，如我的demo所示。

Answer 2

您只需要将flex-wrap: wrap;属性添加到.wpr类。

.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/

退房此笔@ Codepen玩弄Flexbox的：http://codepen.io/enxaneta/full/adLPwv/