HTML之弹性布局

最新推荐文章于 2025-07-07 14:25:26 发布

Healer-l

最新推荐文章于 2025-07-07 14:25:26 发布

阅读量3.5k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：关于HTML那些事文章标签： HTML css3

本文链接：https://blog.youkuaiyun.com/weixin_44238688/article/details/86468977

关于HTML那些事专栏收录该内容

1 篇文章

订阅专栏

本文深入解析弹性布局在HTML页面设计中的应用，通过实例演示如何利用CSS的display:flex属性实现响应式设计，确保页面元素在不同分辨率下均匀分布，保持布局整齐。

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

相信大家在做html页面布局的时候都有过一个很脑袋疼的问题，那就是尺寸不平均，尺寸不平均会导致页面的不整齐，今天给大家分析下弹性布局。

弹性布局html布局中是很广泛的一个属性，他可以让你整个页面的布局合理化的分布在平均的位置上，重要的是他可以根据的你的分辨率来改变宽度。这样就不会因为不知道怎么让布局整齐而抓破头了。
html+css代码:

     <html lang="en">
      <head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.big-box{
			width:100%; 
			height:700px;
			display: flex;  /*这个属性决定了你弹性盒子能否正常运行，所以这个一定要加*/
		}
		.box-1{
			order:1;           /*这个属性的作用是他在全部盒子中的位置，值越小越往前靠。*/
			flex-grow: 1;         /*这个属性的值决定了他有多少的分量，比如说我现在这个就是三个中的一份*/
			background:#000;    
			border-radius: 20px
		}
		.box-2{
			order:2;
			flex-grow:2;
			background:#666;
			border-radius: 20px
		}
		.box-3{
			order:3;
			flex-grow: 1;
			background:#222;
			border-radius: 20px
		}
	</style>
</head>
<body>
	<div class="big-box">
		<div class="box-1"></div>
		<div class="box-2"></div>
		<div class="box-3"></div>
	</div>
</body>

</html>