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

2022年4月19日 31次阅读 来源: 百味苦

项目中有碰到一列 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 循环次数 就是要循环数组的长度 / 你准备显示的列数，多少列都适用

<view class="position-view" v-for="indexs in (parseInt((sizeList.length+1)/4))" :key="indexs"></view>

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

<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>

 

    原文作者：百味苦
    原文地址: https://blog.csdn.net/qq_38026437/article/details/102854009
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞