無法連續添加響應flexboxes

Question

我想放置在同一排4個同等大小flex -boxes在大中屏幕 和2行（2個）用於sm所有屏幕，並以4行（每排1個）用於xs商場屏幕。 其中兩個彈性框是嵌入codepens和另外兩個圖像縮略圖。 截至目前，所有4個flex框的大小不一樣，並顯示在一列中。

這裏是JSFiddle。

.box { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-content: center; 
 
    align-items: center; 
 
} 
 

 
.box div.A { 
 
    order: 1; 
 
    flex: 0 1 auto; 
 
    align-self: auto; 
 
    min-width: auto; 
 
    min-height: auto; 
 
} 
 

 
.box div.B { 
 
    order: 2; 
 
    flex: 0 1 auto; 
 
    align-self: auto; 
 
    min-width: auto; 
 
    min-height: auto; 
 
} 
 

 
.box div.C { 
 
    order: 3; 
 
    flex: 0 1 auto; 
 
    align-self: auto; 
 
    min-width: auto; 
 
    min-height: auto; 
 
} 
 

 
.box div.D { 
 
    order: 4; 
 
    flex: 0 1 auto; 
 
    align-self: auto; 
 
    min-width: auto; 
 
    min-height: auto; 
 
}

<script src="https://assets.codepen.io/assets/embed/ei.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="box"> 
 

 
    <div class="A"> 
 
    <div class="thumbnail"> 
 
     <p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/rashidnaushad/pen/VaKMBJ/">Simple Javascript App</a> by Rashid Naushad (<a href="http://codepen.io/rashidnaushad">@rashidnaushad</a>) on <a href="http://codepen.io">CodePen</a>.</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="B"> 
 
    <div class="thumbnail"> 
 
     <p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/rashidnaushad/pen/pyPjae/">Tribute to Raghuram Rajan</a> by Rashid Naushad (<a href="http://codepen.io/rashidnaushad">@rashidnaushad</a>) on <a href="http://codepen.io">CodePen</a>.</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="C"> 
 
    <div class="thumbnail"> 
 
     <img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" /> 
 
     <div class="caption"> 
 
     <h5 class="text-center">Coming Soon!</h5> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="D"> 
 
    <div class="thumbnail"> 
 
     <img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" /> 
 
     <div class="caption"> 
 
     <h5 class="text-center">Coming Soon!</h5> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

我會做與媒體查詢一個非常簡單的響應列布局。沒有改變你的HTML。

JSFiddle

CSS：

.box { 
    display: block; 
    width: 100%; 
    text-align: center; 
    margin: 0 auto; 
} 
.thumbnail { 
    height: 278px; 
} 
.box div.A, .box div.B, .box div.C, .box div.D { 
    float: left; 
} 

@media (max-width: 519px) { 

.box div.A, .box div.B, .box div.C, .box div.D { 
    width: 100%; 
} 
} 
@media (min-width: 520px) { 

.box div.A, .box div.B, .box div.C, .box div.D { 
    width: 50%; 
} 
} 
@media (min-width: 820px) { 

.box div.A, .box div.B, .box div.C, .box div.D { 
    width: 25%; 
} 
}