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%;
                    }
	        }

posted @ 2021-07-01 14:29  seekHelp  阅读(1705)  评论(0编辑  收藏  举报