灵活的Flexbox网格

Question

我正在寻找一种制作这种动态弹性箱网格的方法：

偶数项目：标准2列网格

项目数量不均匀：最后一项应在右栏上使用两行

（例外：如果只有两个项目可用）

Answer 1

使用flexbox es管理创建 2列网格：

查看以下代码：

$('input[type=button]').click(function() {
  $('.wrapper').append('<div></div>');
});

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.wrapper > div {
  border: 1px solid red;
  flex: 0 1 50%;
  height: 100px;
}
.wrapper > div:nth-last-child(2):nth-child(even) {
  height: 200px;
}
.wrapper > div:nth-last-child(2):nth-child(even) + div {
  margin-top: -100px;
}
input[type=button] {
  position: fixed;
  top: 20px;
  left: 20px;
}
.wrapper > div:nth-last-child(2):first-child {
  height: 200px;
}
.wrapper > div:nth-last-child(2):first-child + div {
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div></div>
  <div></div>
</div>
<input type="button" value="Add Element" />

这实际上是一个 hack ，可以调整框中的height和margin。

让我知道您对此的反馈。谢谢！