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/