Flexbox网格居中Coloumn +每行2个对象

Question

我想用Flexbox构建一个Grid，每行包含2个对象。这些对象应沿垂直coloumn居中，并具有不同的宽度（如图所示）。有没有人有一个想法如何接近它？

我想使用flexbox能够每行切换1个对象并保持正确的顺序。否则我会嵌套div并用

分配对象

left:0;

或

right:0;

然后我无法在移动设备上保留订单。有没有办法实现这个目标？

Answer 1

为了实现这个目的，我使用了masonry.js 我构建了一个网格，每行有2个grid_items，宽度为50％。 然后我将盒子插入grid_items并给它们浮动：右/浮动：左。

的CSS：

.grid {
width: 100vw;
}

.grid-item { 
width: 50%; 
margin-bottom: 30px;
background-color:grey;
}