Flexbox css3 做出响应居中的行？答案

【问题标题】：Flexbox css3 make a responsive centred row?Flexbox css3 做出响应居中的行？
【发布时间】：2017-07-22 05:27:27
【问题描述】：

我在这里有一个 3 框示例，它们都水平居中并试图使它们响应，所以如果分辨率下降，它们将堆叠。我试过用 flex box 来做这件事，因为它允许任何盒子生长并且仍然排成一行。最初我将这些盒子放在引导程序 3 行中并设置了 cols-lg（md 等），但它永远不会解开它们！外包装 (.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;
}

【问题讨论】：

标签： css twitter-bootstrap-3 flexbox responsiveness

【解决方案1】：

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

【讨论】：

完美，不敢相信我忽略了这一点，我确定我不会是最后一个！

【解决方案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/

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

【讨论】：