移动端flex布局出现的问题，手机相册

Question

这是产品要实现的功能
我用flex 得出的效果：

img是由vue里面的 v-for渲染的，属于不可控的
相关代码如下：
.imgItem

display flex
flex-flow row wrap
img
  width 104px
  height 104px
  margin 2px 2px
  flex 1 1 100%
  &:nth-child(1),&:nth-child(4),&:nth-child(7)
    margin-left 0
  &:nth-child(3),&:nth-child(6),&:nth-child(9)  
    margin-right 0

问下如何得到产品UI图的要求

Answer 1

刚好有你要的答案
https://segmentfault.com/a/11...
效果图

原理是一样的，你讲宽度啊定位3格即可

Answer 2

.imgItem
    display flex
    flex-wrap wrap
    justify-content flex-start
    div
      width 32%
      height 104px

大致这样 细节问题再调下

Answer 3

之前做过一个横向瀑布流的图片页面 你这个问题主要就是css的问题

#waterfall{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height:100%;
        align-content:flex-start;
        /*overflow-y: scroll;*/
    }
    #waterfall img{
        height: 200px;
        width: 32%;
        margin: 2px 2px;
        flex-grow: 1;
        object-fit: cover;
        position: relative;
    }

Answer 4

img
flex-grow:0;

Answer 5

看下这个阮一峰的flex布局教程
http://www.ruanyifeng.com/blo...