flex的弹性布局技巧

最新推荐文章于 2024-12-12 22:00:02 发布

亿米酒酒

最新推荐文章于 2024-12-12 22:00:02 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 HTML CSS 文章标签： fliex 弹性布局

本文链接：https://blog.youkuaiyun.com/weixin_44484452/article/details/86660807

前端同时被 3 个专栏收录

21 篇文章

订阅专栏

CSS

7 篇文章

订阅专栏

HTML

6 篇文章

订阅专栏

传统的布局横向排列不容易实现，使用弹性布局就可以更加方便地实现布局效果，
在这里插入图片描述
只要在外层的盒子使用flex布局,就可以实现盒子的一级内容出现弹性布局样式，而对第二级内容无影响，而且屏幕的大小变化不会挤压内容样式。

完全不使用定位和边距就可以实现的布局

<style>
.fove{
	width: 300px;
	height: 300px;
	background: #6CA374;
	border-radius: 40px;
	display: flex;
	justify-content: space-around;
}
.fove div{
	height: 300px;
	width: 100px;
	display: inline-flex;
	justify-content: space-around;
	flex-wrap: wrap;
	align-items: center;
}
.fove div span{
	width: 90px;
	height: 90px;
	background: #190404;
	border-radius: 50%;
}
</style>
<body>
	<div class="fove fr">
		<div>
			<span class="doha1"></span>
			<span class="doha2"></span>
		</div>
		<div>
			<span class="doha4"></span>
			<span class="doha4"></span>
		</div>
	</div>
</body