Question

我试图在大屏幕和中等屏幕中将4个相同大小的flex - 盒放在一行中 sm所有屏幕分为2行（每行2个），xs商城屏幕为4行（每行1个）。两个弹性框是嵌入的codepens，另外两个是图像缩略图。截至目前，所有4个flex框的大小不同，并显示在列中。

这是JSFiddle。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

我会使用媒体查询做一个非常简单的响应式列布局。没有更改HTML。

https://wiki.lyx.org/FAQ/MinimalExample

<强> CSS：

{{1}}

无法连续添加响应式Flexbox

1 个答案: