css如何实现整体两边对齐,末尾元素左边对齐,类似九宫格最后少了一格

实现如下图效果(两边间距为0,中间有间隔)有两种方法:
两边间距为0,中间有间隔

方法一:采用 flex 布局,然后最后少了补齐一个容器占位

这里假如有5个项目,可以采用3n-1的计算方式来判断是否需要添加F盒子,这样不会导致最后两个元素左右对齐

<view class="list-box">
	<view class="item">A</view>
	<view class="item">B</view>
	<view class="item">C</view>
	<view class="item">D</view>
	<view class="item">E</view>
	<view class="item-add">F</view>
</view>
.list-box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.item {
	width: 30%;
	heigth: 100px
}
.item-add {
	width: 30%;
}

方法二:使用 grid 布局

<view class="list-box">
	<view class="item">A</view>
	<view class="item">B</view>
	<view class="item">C</view>
	<view class="item">D</view>
	<view class="item">E</view>
</view>
.list-box {
	display: grid;
	grid-column-gap: 5%;
	grid-template-columns: repeat(3,1fr);
}
.item {
	width: 30%;
	heigth: 100px
}
发布了48 篇原创文章 · 获赞 33 · 访问量 14万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览