flex三列多行左右对齐,超出换行左对齐

最近uni-app开发出现一个页面效果:多行三列左右对齐,超出换行左对齐,网上查了很多都没有能有效解决这个问题,而且这个在手机app上属于比较特殊的情况,UI效果:
在这里插入图片描述
我这里就讲自己如何解决这个问题:
首先一个问题考虑到最后一行不满的情况,如果使用左右两端对齐,很明显最后一行,如果是两列呢?例如这个:

在这里插入图片描述
此时,就不满足左对齐了!

这个情况是会遇到的。比如,我们用v-for循环渲染内容,后台随机增加标签内容,就无法避免出现上面两端对齐的问题了!

所以考虑到特殊情况作了如下改动,上代码

<view class="itemBox">
	<view class="item">
		仪表仪器
	</view>
	<view class="item">
		仪表仪器
	</view>
	<view class="item">
		仪表仪器
	</view>
	<view class="item">
		仪表仪器
	</view>
	<view class="item">
		仪表仪器
	</view>
	<view class="item">
		仪表仪器
	</view>
</view>
.itemBox {
	width: auto;
	display: flex;
	/* 两端对齐 */
	justify-content: space-between;
	flex-wrap: wrap;

	.item {
		width: 32.5%;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background-color: #F2F2F2;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		margin-top: 20rpx;
	}
	
	/* 如果最后一行是3个元素 */
	.item:last-child:nth-child(3n - 1) {
	    margin-right: calc(32.5% + 3% / 3);
	}
	/* 如果最后一行是2个元素 */
	.item:last-child:nth-child(3n - 2) {
	    margin-right: calc(65% + 6% / 3);
	}
}

最后效果:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
很完美的解决了最后一行不满一列、两列不是左对齐的情况!

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值