在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

移動(dòng)端flex布局出現(xiàn)的問(wèn)題，手機(jī)相冊(cè)

clipboard.png
這是產(chǎn)品要實(shí)現(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

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

回答
編輯回答
絯孑氣

img
flex-grow:0;

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

之前做過(guò)一個(gè)橫向瀑布流的圖片頁(yè)面 你這個(gè)問(wèn)題主要就是css的問(wèn)題 圖片描述

#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
編輯回答
拼未來(lái)

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

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

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

2017年7月20日 10:14