灵活的 Flexbox 网格 [关闭]

Question

我正在寻找一种方法来制作这种动态 flexbox 网格：

项目数量均匀：标准 2 列网格

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

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

Answer 1

设法使用flexboxes 创建您的 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 的框进行调整。

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