flex 的封装和简化

最新推荐文章于 2024-07-05 11:42:52 发布

原创最新推荐文章于 2024-07-05 11:42:52 发布 · 798 阅读

0 ·

CC 4.0 BY-SA版权

css 同时被 2 个专栏收录

9 篇文章

订阅专栏

前端

4 篇文章

订阅专栏

本文探讨了在前端开发中如何对Flex布局进行封装和简化，通过创建自定义组件，实现更便捷、灵活的布局管理。内容包括Flex基础概念、布局问题解决、封装组件的设计思路及其实现方法，旨在提升前端开发效率。

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


.COL{
	display:flex;
	flex-direction:column;
	height:100vh;
	width:100vw;
}
.flex{
	display:flex;
}	
.col{
	display:flex;
	flex-direction:column;
}	
.Content{
	flex:1;
	overflow:auto;
}	
.absolute{
	background:white;
	position:absolute;
	width:100vh;
	height:100vh;
	top:0;
}	
.A{
	display:flex;
	width:100vw;
	justify-content:space-around;
}
.C{
	display:flex;
	width:100vw;
	justify-content:center;
}	
.B{
	display:flex;
	width:100vw;
	justify-content:space-between;
}
.E{
	display:flex;
	width:100vw;
	justify-content:flex-end;
}	
.AS{
	display:flex;
	height:100vh;
	width:100vw;
	justify-content:space-around;
	flex-direction:column;
}
.CS{
	display:flex;
	height:100vh;
	width:100vw;
	justify-content:center;
	flex-direction:column;
}	
.BS{
	display:flex;
	height:100vh;
	width:100vw;
	justify-content:space-between;
	flex-direction:column;
}
.ES{
	display:flex;
	height:100vh;
	width:100vw;
	justify-content:flex-end;
	flex-direction:column;
}	
.Ac{
	display:flex;
	width:100vw;
	justify-content:space-around;
	height:100vh;
	align-items:center;
}	
.Ae{
	display:flex;
	width:100vw;
	justify-content:space-around;
	height:100vh;
	align-items:flex-end;
}	
.Bc{
	display:flex;
	width:100vw;
	justify-content:space-between;
	height:100vh;
	align-items:center;
}	
.Be{
	display:flex;
	width:100vw;
	justify-content:space-between;
	height:100vh;
	align-items:flex-end;
}	
.Cc{
	display:flex;
	width:100vw;
	justify-content:center;
	height:100vh;
	align-items:center;
}	
.Ce{
	display:flex;
	width:100vw;
	justify-content:center;
	height:100vh;
	align-items:flex-end;
}	
.Ec{
	display:flex;
	width:100vw;
	justify-content:flex-end;
	height:100vh;
	align-items:center;
}	
.Ee{
	display:flex;
	width:100vw;
	justify-content:flex-end;
	height:100vh;
	align-items:flex-end;
}	
.AC{
	display:flex;
	width:100vw;
	justify-content:space-around;
	height:100vh;
	flex-direction:column;
	align-items:center;
}	
.AE{
	display:flex;
	width:100vw;
	justify-content:space-around;
	height:100vh;
	flex-direction:column;
	align-items:flex-end;
}	
.BC{
	display:flex;
	width:100vw;
	justify-content:space-between;
	height:100vh;
	flex-direction:column;
	align-items:center;
}	
.BE{
	display:flex;
	width:100vw;
	justify-content:space-between;
	height:100vh;
	flex-direction:column;
	align-items:flex-end;
}	
.CC{
	display:flex;
	width:100vw;
	justify-content:center;
	height:100vh;
	flex-direction:column;
	align-items:center;
}	
.CE{
	display:flex;
	width:100vw;
	justify-content:center;
	height:100vh;
	flex-direction:column;
	align-items:flex-end;
}	
.EC{
	display:flex;
	width:100vw;
	justify-content:flex-end;
	height:100vh;
	flex-direction:column;
	align-items:center;
}	
.EE{
	display:flex;
	width:100vw;
	justify-content:flex-end;
	height:100vh;
	flex-direction:column;
	align-items:flex-end;
}