弹性布局多列换行居左布局

Myth丶恋晨 2023-05-29 11:38 44阅读 0赞

项目中有碰到一列 3 个及以上的 多行布局

设置 justify-content: space-between; 后 如果满格 就是正常显示，如果最后一行少1个就会出现 两头布局，影响美观。

做一个解决这种问题的样式

css

.position-view,.size-view{
    		width: 150upx;
    		margin: 10upx 0;
    	}
    	.size-view{
    		padding: 12upx;
    		font-size:28upx;
    		font-weight:400;
    		color:rgba(124,124,124,1);
    		line-height:40upx;
    		border: 1upx solid rgba(151,151,151,1);
    		border-radius:8px;
    	}
    	.position-view{
    		content: '';
    	}

样式很简单 就是一个 占位 的view

在盒子尾部 加上一个 占位 的view 循环次数 就是要循环数组的长度 / 你准备显示的列数，多少列都适用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70][]

<template>
    	<view>
    		<view class="main-view mar-t20 pad20">
    			<view class="flex-cb border-bot">
    				<view class="">尺寸</view>
    				<view class="">编辑</view>
    			</view>
    			<view class="size-list">
    				<view class="size-view flex-cc" v-for="(item,index) in sizeList" :key="item.name">
    					{
       {item.name}}
    				</view>
    				<view class="size-view flex-cc" v-if="isadd">
    					<input type="text" value="" placeholder="输入" v-model="inputAdd"/>
    				</view>
    				<view class="size-view flex-cc" @tap="add">
    					新增
    				</view>
    				<view class="position-view" v-for="indexs in (parseInt((sizeList.length+1)/4))" :key="indexs"></view>
    			</view>
    			<view class="but-view flex-ca pad20" v-if="isadd">
    				<view class="flex-cc" @tap="addVal">
    					确定
    				</view>
    				<view class="flex-cc" @tap="closeAdd">
    					取消
    				</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				sizeList:[
    					{id:1,name:'S'},
    					{id:2,name:'M'},
    					{id:3,name:'L'},
    					{id:4,name:'XL'},
    					{id:5,name:'XXL'},
    					{id:6,name:'3XL'},
    					{id:7,name:'4XL'},
    					{id:8,name:'5XL'},
    				],
    				isadd:false,
    				isdel:false,
    				inputAdd:'',
    			}
    		},
    		methods: {
    			add(e){
    				this.isadd = true;
    			},
    			addVal(e){
    				if(this.inputAdd != ''){
    					this.sizeList.push({id:this.sizeList.length,name:this.inputAdd})
    				}
    				this.inputAdd = '';
    				//this.isadd = false;
    			},
    			closeAdd(e){
    				this.inputAdd = '';
    				this.isadd = false;
    			}
    		}
    	}
    </script>
    
    <style>
    	.main-view{
    		background-color: #FFFFFF;
    	}
    	.size-list{
    		display: flex;
    		align-items: flex-start;
    		justify-content: space-between;
    		align-content: flex-start;
    		flex-wrap: wrap;
    	}
    	.position-view,.size-view{
    		width: 150upx;
    		margin: 10upx 0;
    	}
    	.size-view{
    		padding: 12upx;
    		font-size:28upx;
    		font-weight:400;
    		color:rgba(124,124,124,1);
    		line-height:40upx;
    		border: 1upx solid rgba(151,151,151,1);
    		border-radius:8px;
    	}
    	.position-view{
    		content: '';
    	}
    	.but-view view{
    		background-color: #007AFF;
    		color: #FFFFFF;
    		padding: 10upx;
    		border-radius: 20upx;
    		width: 200upx;
    	}
    	
    	input{
    		font-size:28upx;
    		font-weight:400;
    		line-height:40upx;
    		text-align: center;
    	}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70]: /images/20230529/edc8a471cf824c098c2bc2a03c0db47f.png