无法连续添加响应式弹性框答案

【问题标题】：Unable to add responsive flexboxes in a row无法连续添加响应式弹性框
【发布时间】：2016-03-28 05:06:22
【问题描述】：

我正在尝试将 4 个大小相同的 flex-boxes 放在大屏幕和中屏幕的单行中 small 屏幕为 2 行（每行 2 个），xsmall 屏幕为 4 行（每行 1 个）。其中两个弹性框是嵌入的代码笔，另外两个是图像缩略图。截至目前，所有 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>

【问题讨论】：

标签： html twitter-bootstrap css flexbox

【解决方案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%;
}
}

【讨论】：