灵活的Flexbox网格 [英] Flexible Flexbox Grid

问题描述

偶数量的项目：Standard 2 column Grid

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

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

解决方案

使用 flexbox es创建您的 2列网格

查看下面的代码：

点击（function（）{$（'。wrapper'）。append（'< div>< / div>）;}）;    body {margin：0;} * {box-sizing ：border-box;}。wrappe r {display：flex; flex-wrap：wrap;}。wrapper> div {border：1px纯红色; flex：0 1 50％; height：100px;}。wrapper> div：nth-​​last-child（2）：nth-​​child（偶数）{height：200px;}。wrapper> div：nth-​​last-child（2）：nth-​​child（偶数）+ div {margin-top：-100px;} input [type = button] {position：fixed;顶部：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 =buttonvalue =Add Element/>  

这实际上是一个调整 height 和保证金的框。

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

I'm looking for a way to make this kind of dynamic flexbox grid:

Even amount of items: Standard 2 column Grid

Uneven amount of items: The last item should use two rows on the right column

(exception: if only two items available )

解决方案

Managed to create your 2 column grid using flexboxes:

Check out the code below:

$('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" />

This is actually a hack that adjusts for height and margin of the boxes.

Let me know your feedback on this. Thanks!

这篇关于灵活的Flexbox网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！