#弹性布局#（附源码） justify-content:space-between 强制换行，最后一行左对齐

最新推荐文章于 2025-06-06 08:00:51 发布

原创最新推荐文章于 2025-06-06 08:00:51 发布 · 948 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #前端 #前端框架 #scss #javascript

弹性布局专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何利用弹性布局（Flexbox）实现一行显示三个子元素，并在父元素宽度有限时自动换行。通过设置`justify-content: space-between`实现两端对齐，同时在最后一行保持左对齐。此外，利用伪元素解决了最后一行中间留白的问题，确保子元素布局的美观和合理性。示例代码中展示了具体的CSS样式和Vue.js的模板结构，适用于前端开发中的布局设计。

部署运行你感兴趣的模型镜像

#弹性布局# justify-content:space-between 最后一行左对齐

一、需求：

一行3个子盒子、

父盒子左右有边距、

会自动换行、

下一行的子盒子左对齐

二、知识点：

弹性布局、

v-for循环渲染、

magin、

盒子居中对齐、

伪元素占位

三、源码示例如下：

<template>
<view>
	<view class="choose" >
		<view class="photo" v-for="(item,index) in imgArr">
                <image :src="item" ></image>
        </view>
	</view>
</view>
</template>

<script>
	export default {
		data() {
				return {	
					imgArr:
                    ["https://pic2.zhimg.w.jpg?source=1940ef5c",
                    "https://pic2.zhimg.w.jpg?source=1940ef5c",
                    "https://pic2.zhimg.w.jpg?source=1940ef5c",
                    "https://pic2.zhimg.w.jpg?source=1940ef5c",
                    "https://pic2.zhimg.w.jpg?source=1940ef5c",]

				}
			},
			methods: {
		
				}
				
			},
		
</script>

<style scoped lang="scss">
        //父盒子
	.choose {
		width: 95%; //不要写死宽度
		display: flex; //使用弹性布局
		flex-wrap: wrap; //强制换行
		justify-content: space-between;  //子盒子排列两端对齐
		margin: 20rpx auto; //居中对齐，距离顶部有20rpx
		text-decoration: none; //取消下划线
        //子盒子
		.photo {
			width: 32%; //设置每一个子盒子的宽度，不要写死宽度
			height: 220rpx;//设置每一个子盒子的高度
			margin-bottom: 20rpx; //设置每个子盒子距离底部有20rpx
			background-color: #2979FF;
			image {
				width: 100%;//子盒子里面的图片高度
				height: 220rpx;//子盒子里面的图片宽度
			}
		}
	}
    //父盒子的最后一个盒子
    //解决末尾中间留白，使其靠左分布的方法：给父容器使用伪元素占位
	.choose:after{  // 使用伪类元素占据单位，不影响页面
	            content: "";
	            height: 0;
	            width: 32%;
	        }
			
</style>

四、效果：