flexbox布局-根据图片确定元素高度（类似瀑布流布局）

首先确定一下需求：多个元素，每个元素里有图片和一些文字等。每一行的图片区域高度根据最高图片决定，不够高的图片垂直居中
可以看下图中第一行图片较高，第二行图片较矮
以上可通过多嵌套两层display：flex实现

先上代码结构

   

       

           
       
       
like price
   
   

       

           
       
       
like price
   
   。 
   。
   。

解析都写里边 了

/* 列表父元素ul设置flex，子元素的align-items默认为stretch，即跟最高的元素等高 */
.box ul {
    display: flex;
    flex-wrap: wrap;
}
/* li设置纵向排列，子元素压缩不换行 */
.box ul li {
    display: flex;
    flex-direction: column;
}

/* 图片区域占余下的所有高度，并水平垂直居中 */
.box ul li .img {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.box ul li img {
    width: 100%;
    /* 建议设置最小宽度，以防图片加载失败样式错乱 */
    min-height: 180px;
}
``


[全部代码在此，点击查看](https://github.com/WinnieWei0/flexbox-waterfall)