Flex布局中元素主轴上平均分布 多余的向左对齐

content:父元素

content-item: 子元素

主轴上子元素平均分布
css 复制代码
.content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.service-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80px;
		height: 80px;
	  }
}

效果:

给父元素添加伪元素
css 复制代码
.content:after {
	content: "";
	flex: auto;
}
.content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.service-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80px;
		height: 80px;
	}
}

效果:

相关推荐
岛风风3 分钟前
前端HTML导出PDF分页难题:10天踩坑后的终极方案,精细到每个像素点!!!
前端·javascript
LYFlied5 分钟前
单页应用与多页应用:架构选择与前端演进
前端·架构·spa·mpa·ssr
前端老宋Running8 分钟前
你的组件 API 为什么像个垃圾场?—— React 复合组件模式 (Compound Components) 实战教学
前端·react.js·架构
alanAltman8 分钟前
前端架构范式:意图系统构建web
前端·javascript
梦鱼10 分钟前
我踩了 72 小时的 Electron webview PDF 灰色坑,只为告诉你:别写这行代码!
前端·javascript·electron
ycgg11 分钟前
Webpack vs Vite 全方位对比:原理、配置、场景一次讲透
前端
百罹鸟12 分钟前
在langchain Next 项目中使用 shadcn/ui 的记录
前端·css·人工智能
华仔啊15 分钟前
Vue3和Vue2的核心区别?很多开发者都没完全搞懂的10个细节
前端·vue.js
亭上秋和景清20 分钟前
指针进阶: 回调函数
开发语言·前端·javascript
Mintopia21 分钟前
🌐 开源社区在 WebAIGC 技术迭代中的推动作用与争议
前端·人工智能·aigc