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

最新推荐文章于 2025-05-08 15:43:45 发布

原创最新推荐文章于 2025-05-08 15:43:45 发布 · 3.6k 阅读

CC 4.0 BY-SA版权

博客介绍了在uni-app中实现多行三列布局，且在最后一行不满时依然保持左对齐的方法。通过CSS样式设置，利用`justify-content: space-between`和针对不同情况的`margin-right`调整，成功解决了两端对齐可能导致的最后一行对齐问题。文章提供了完整代码示例，并展示了最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近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);
	}
}