鍍金池/ 問答/HTML5  HTML/ 移動端flex布局出現(xiàn)的問題，手機(jī)相冊

移動端flex布局出現(xiàn)的問題，手機(jī)相冊

clipboard.png
這是產(chǎn)品要實現(xiàn)的功能
我用flex 得出的效果：

clipboard.png
img是由vue里面的 v-for渲染的，屬于不可控的
相關(guān)代碼如下：
.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

問下如何得到產(chǎn)品UI圖的要求

回答
編輯回答
絯孑氣

img
flex-grow:0;

2017年8月13日 04:17
編輯回答
巷尾

之前做過一個橫向瀑布流的圖片頁面 你這個問題主要就是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;
    }
2017年2月23日 21:19
編輯回答
脾氣硬

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

原理是一樣的，你講寬度啊定位3格即可

2017年1月5日 07:25
編輯回答
拼未來

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

2017年9月4日 04:13
編輯回答
久愛她
.imgItem
    display flex
    flex-wrap wrap
    justify-content flex-start
    div
      width 32%
      height 104px

大致這樣 細(xì)節(jié)問題再調(diào)下

2017年7月20日 10:14