如何实现以下效果
在淘宝、美团、拼多多等电商平台里面首页商品的展示都有这个效果。正常效果如图一（以y轴为主轴）：
图一
图一代码如下：错误效果
由于每个商品的内容不一样，所以会导致盒子高度不一样。eg:第一排盒子顶部处于同一水平线，但是高度不同，往往会导致第二排盒子的顶部以第一排里面高度最大的盒子的顶部为起始位置展示出来，这样呈现的效果就不好看，如图二（以x轴为主轴）：
图二
图二代码如下：新的问题
如果是以y轴为主轴，那么想要实现项目换行，就需要给外面的大盒子设置高度。因为大盒子的高度是由里面的小项目撑起来的，如果不设置高度，大盒子的高度可以被一直撑大，那么呈现出的效果就只有一列。
大盒子的高度应该是多大呢
如果想要项目呈现出两列，我觉得大盒子的高度h应该是:假设项目个数总数是n，项目高度a，则h=项目高度之和/2+合适的加长高度。
项目之间的间隔可以由margin-buttom来实现（可以不使用justify-content来实现）。使用justify-content：space——between可能出现问题如下图三效果,因为第一列有3个项目，第二列有有2个项目，使用之后就会导致第二列两个项目之间出现一个大空白。
图三
