zoukankan      html  css  js  c++  java
  • flex布局限制每行固定个数,最后一行左对齐

    解决方案:

                  <view class="uni-slsct">   // 父元素
    			<view class="uni-slsct_children" v-for="(item,index) in buttonList" :key="index" @click="intoBotton(item.id,item.textButton)">  //子元素
    				<image class="uni-image" :src="item.Image" mode=""></image>
    				<text class="uni-textB">{{item.textButton}}</text>
    			</view>
    			<view class="uni-slsct_children" v-for="item in (row-buttonList.length%row)" v-if="buttonList.length%row>0">   //要添加的子元素
    				
    			</view>
    		</view>
    
    
                    data() {
    			return {
    				row:4,//每行显示数量
    				buttonList:[{ // 循环的子元素
    					Image:"../../static/logo.png",
    					textButton:"领料",
    					id:"1"
    				},{
    					Image:"../../static/logo.png",
    					textButton:"烘料",
    					id:"2"
    				},{
    					Image:"../../static/logo.png",
    					textButton:"上模",
    					id:"3"
    				},{
    					Image:"../../static/logo.png",
    					textButton:"加料+洗机",
    					id:"4"
    				},{
    					Image:"../../static/logo.png",
    					textButton:"调机",
    					id:"5"
    				},{
    					Image:"../../static/logo.png",
    					textButton:"生产",
    					id:"6"
    				},{
    					Image:"../../static/logo.png",
    					textButton:"检验",
    					id:"7"
    				}],
    			}
    		},
    
    
    
    
                    .uni-slsct{
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        padding: 36px 128px;
                        .uni-slsct_children{
                          flex: 24%;
                        }
    	        }
    
    
  • 相关阅读:
    javascript 的继承实例
    [转载]编写高性能js
    弹出菜单
    xml xpath dta笔记
    jquery 学习笔记
    公用的css
    谷歌主页动画效果——利用视距暂留原理
    javascript 新知识
    ie6/7 bug大全
    javascript 原生实现 jquery live/delegate
  • 原文地址:https://www.cnblogs.com/axingya/p/14958615.html
Copyright © 2011-2022 走看看