css - 在桌面和移动设备上为 2 列和 3 列编写 flexbox 代码(包装)

Question

我真的很难弄清楚这个 CSS flexbox 解决方案。基本上有 2 个问题，一个有 2 列布局，另一个有 3 列布局。

2列:
我认为这可能非常简单:

3 列:
这可能更高级一些:

容器类是 .container，子类只是 .left、.right 和 。中间。不确定它是否相关，但 .container 的宽度是视口(viewport)的 100%。我可能应该补充一点，由于我无法控制的原因，使用 Bootstrap 是不可能的。

Answer 1

以下是您如何为三列执行此操作。我只是添加它，因为它有点棘手:

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}

.left {
  order: 1;
  background: red;
  flex-basis: 100%;
  height: 300px
}

.middle {
  order: 3;
  background: green;
  flex-basis: 100%;
  height: 300px;
}

.right {
  order: 2;
  background: yellow;
  flex-basis: 100%;
  height: 300px;
}

@media screen and (min-width:600px) {
  .container {
    flex-wrap: nowrap;
  }
  .left {
    flex-basis: 200px;
    order: 1;
  }
  .middle {
    flex-basis: 1;
    order: 2;
  }
  .right {
    flex-basis: 200px;
    order: 3;
  }
}

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

还有 fiddle http://jsfiddle.net/2touox81/

如您所见，您可以为 flex 元素设置列顺序。

希望这对您有所帮助。