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 中所示。

Answer 2

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

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

看看这个 Pen @Codepen 来玩弄 flexbox：http://codepen.io/enxaneta/full/adLPwv/

Flexbox css3 做出响应式居中行？

Flexbox css3 make a responsive centred row?

css

flexbox

twitter-bootstrap-3

responsiveness