flex布局两端对齐space-between，解决最后一行不对齐

最新推荐文章于 2025-03-21 00:44:44 发布

小张张C

最新推荐文章于 2025-03-21 00:44:44 发布

阅读量1.1k

点赞数 1

文章标签： css css3 uni-app

本文链接：https://blog.youkuaiyun.com/qq_43432157/article/details/122450023

版权

本文介绍了一种使用Flex布局实现两端对齐的方法，通过设置特定样式确保了在多行排列时每行元素都能保持均匀间隔，解决了传统布局方式下最后一行不对齐的问题。

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

<template>
	<view class='item-c'>
		<view class='item'>ccc</view>
		<view class='item'>ccc</view>
		<view class='item'>ccc</view>
		<view class='item'>ccc</view>
		<view class='item'>ccc</view>
		<view class='item'>ccc</view>
		<view class='item'>ccc</view>
	</view>
</template>

<script>
</script>

<style>
	/* flex布局两端对齐space-between，解决最后一行不对齐 */

	.item-c {
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
	}

	.item {
		width: 100px;
		height: 100px;
		border: 2rpx solid #007AFF;
		background: #007AFF;
	}

	.item-c:after {  /* uniapp应使用 &:afte */
		content: "";
		width: 100px;
	}
</style>