css - Flexbox css3 使响应居中的行？

Question

I have a 3 box example here all horizontally centered and trying to make them responsive, so if the resolution drops they will stack. I've tried doing this with flex box because it allows any box to grow and still lines up. Originally I put the boxes in bootstrap 3 row with the cols-lg (md etc) set but it would never unstack them! The outer wrapper (.wpr) will on implementation be a banner which is why I would like the positional boxes horizontally aligned where possible.

注意:答案不一定要用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 所示.