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;
	}
}

效果:

相关推荐
用户479492835691513 分钟前
专升本前端毕业 1 年,从初创到大厂,我的开源项目上了 github trending,顺便聊聊做开源的收获
前端·后端·github
Ashley的成长之路17 分钟前
前端性能优化实战手册·第1篇:从 Lighthouse 60 到 95 的完整路径
前端·性能优化
思码梁田28 分钟前
CSS letter-spacing 属性详解:掌控字符之间的呼吸感
前端·css
大尚来也37 分钟前
React Hooks全解析:告别繁琐Class组件
前端·react.js·前端框架
不简说44 分钟前
JS 代码技巧 vol.2 — 20 个数组/对象/字符串/正则的实用技巧
前端·javascript·面试
小小编程路1 小时前
C++ 块作用域详解:从基础到实战
前端·javascript·vue.js
虚惊一场1 小时前
MarkView:纯前端 Markdown 实时预览工具的架构设计
前端·javascript·vue.js
hunterandroid1 小时前
[鸿蒙从零到一] ArkUI 常用布局实战:Column、Row、Stack 与 Flex
前端
海上彼尚2 小时前
Nodejs也能写Agent - 17.LangGraph篇 - Checkpointer 与 Memory
前端·javascript·人工智能·langchain·node.js
盛夏绽放2 小时前
Hermes Agent 全栈安装、配置与Web端架构深度解析(官方命令版·最终优化)
前端·架构·hermes