フレックスボックスcss3反応中心の行を作る？

Question

ここに3つのボックスの例がすべて水平に中央に配置されていて、反応が速くなるようにしようとしているので、解像度が下がるとスタックになります。フレックスボックスでこれをやろうとしましたが、それはどんな箱でも成長し続けているからです。もともと私は、コラム-lg（mdなど）を設定した状態でブートストラップ3行にボックスを置いていましたが、決してそれらをアンスタッキングしませんでした！外側のラッパー（.wpr）は実装時にバナーになるので、可能な場合は位置ボックスを水平に整列させたいと考えています。

注：答えはフレックスボックスを使用する必要はありません！

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

demoに示すように、flex-wrap: wrap;を.wprに追加できます。

Answer 2

クラスにflex-wrap: wrap;プロパティを追加するだけです。

.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をチェックアウト：http://codepen.io/enxaneta/full/adLPwv/