小程序flex布局采用justify-content:space-between时,当为两个内容时中间被空出

@Winner

于 2021-05-14 09:43:55 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.csdn.net/zxh7770/article/details/116780227

小程序专栏收录该内容

26 篇文章

订阅专栏

本文探讨了如何利用Flex布局的justify-content: space-between属性在两端对齐内容时，出现中间空隙的问题，并提出通过在父容器上添加伪元素::after并设置特定宽度来填充这一空隙的方法。示例代码展示了在Vue环境中应用该技巧的实现。

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

阐述：

flex布局采用justify-content:space-between,当为两个内容时中间被空出
给外层容器加一个伪类::after,设置样式content:""; width:“内容宽”

在这里插入图片描述

上述图片问题解决方案如下：

<view class="goods">
	<view v-for="(item) in 9">
		<win-goods></win-goods>
	</view>
</view>


.goods {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	margin-top: $win-mtop;
}
.goods:after {
	content:'';
	width: 45%;
  border:1px solid transparent;
}
.goods:after {
	content:'';
	width: 45%;
 	border:1px solid transparent;
}

在这里插入图片描述