单独的列容器

这个方案，我们需要对我们的HTML结构做一个变更。变更后的HTML结构看起来像这样：

1234567891011121314151617181920212223不难发现，在div.item外面包了一层div.column，这个div.column称为列表项目的单独容器。在这个解决方案中，.masonry和.column都通过display:flex属性将其设置为Flex容器，不同的是.masonry设置为行（flex-direction:row），而.column设置为列（flex-direction）：.masonry { display: flex; flex-direction: row; }

.column {
display: flex;
flex-direction: column;
width: calc(100%/3);
}12345678910这里有一个需要注意，在.column咱们通过calc()方法来控制每个列的宽度，如果你希望是三列，那么可以设置width: calc(100% / 3);实际中根据自己的设计来设置width：.masonry {
display: flex;
flex-direction: row;
}

.column {
display: flex;
flex-direction: column;
width: calc(100%/3);
}12345678910这种方案对应的响应式设计，需要在不同的媒体查询下修改width值，比如：.masonry {
display: flex;
flex-direction: column;
}

@media only screen and (min-width: 500px) {
.masonry {
flex-direction: row;
}
}

.column {
display: flex;
flex-flow: column wrap;
width: 100%;
}

@media only screen and (min-width: 500px) {
.column {
width: calc(100%/5);
}
}
1234567891011121314151617181920212223效果如下：
http://codepen.io/ramenhog/pen/PpEPWG
从实战结果已经告诉你答案了。只不过在结构上变得冗余一点。