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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM