首页 前端知识 CSS实战与技巧——36. 弹性元素的扩展比率( flex-grow)

CSS实战与技巧——36. 弹性元素的扩展比率( flex-grow)

2025-03-15 13:03:54 前端知识 前端哥 165 575 我要收藏

背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<style type="text/css">
			.box{
				width: 400px;height: 400px;background: bisque;
				margin: 50px auto;overflow: hidden;
				/*转成弹性盒子*/
				display: -webkit-flex;
				display: flex;
				
				/*换行,默认交叉轴正向换行*/
				flex-wrap: wrap;
				/*两端对齐,项目之间的间隔都相等*/
				justify-content: space-between;				
				/*两端对齐,项目之间的间隔都相等*/
				align-content: space-between;
			}
			.zxw{
				width: 120px;line-height: 50px;
				text-align: center;color: #fff;
				height: 50px;
				background: red;
			}
			
		</style>
	</head>
	<body>
		<!--设置弹性元素的扩展比率来分配剩余空间:-->
		<!--flex-grow: 0;未设置默认为0-->	
		
		<ul class="box">
			<li id="n1" class="zxw">zxw1</li>
			<li id="n2" class="zxw">zxw2</li>
			<li id="n3" class="zxw">zxw3</li>
		
		
	</body>
</html>

在这里插入图片描述
弹性元素的扩展比率:是让如上演示的弹性元素来分配剩余的空间,

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<style type="text/css">
			.box{
				width: 400px;height: 400px;background: bisque;
				margin: 50px auto;overflow: hidden;
				/*转成弹性盒子*/
				display: -webkit-flex;
				display: flex;
				
				/*换行,默认交叉轴正向换行*/
				flex-wrap: wrap;
				/*两端对齐,项目之间的间隔都相等*/
				justify-content: space-between;				
				/*两端对齐,项目之间的间隔都相等*/
				align-content: space-between;
			}
			.zxw{
				width: 120px;line-height: 50px;
				text-align: center;color: #fff;
				/*margin-top: 10px;*/
				height: 50px;
			}
			#n1{
				background: red;width: 50px;
				
			}
			#n2{
				 background: green;width: 70px;
				}
				
			#n3{
				 background: blue; width: 100px;
				
			}
		</style>
	</head>
	<body>
		<!--设置弹性元素的扩展比率来分配剩余空间:-->
		<!--flex-grow: 0;未设置默认为0-->	
		
		<ul class="box">
			<li id="n1" class="zxw">zxw1</li>
			<li id="n2" class="zxw">zxw2</li>
			<li id="n3" class="zxw">zxw3</li>
		
		
	</body>
</html>

这一行弹性元素占了220个像素,还剩下空间180个像素,那怎样将多余的弹性空间分配给这三个弹性元素呢,那就要设置扩展比率属性(flex-grow)

在这里插入图片描述

设置弹性元素的扩展比率来分配剩余空间:
不设置flex-grow属性则flex-grow: 0;(未设置默认为0,)不参与分配剩余空间

这里的1 2 3指的是将剩余的空间(这里剩余180px)分成多少份,并分别占1,2,3份

如这里将剩余的空间分成6份,#n1占1份,#n2占2份,#n3占3份
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<style type="text/css">
			.box{
				width: 400px;height: 400px;background: bisque;
				margin: 50px auto;overflow: hidden;
				/*转成弹性盒子*/
				display: -webkit-flex;
				display: flex;
				
				/*换行,默认交叉轴正向换行*/
				flex-wrap: wrap;
				/*两端对齐,项目之间的间隔都相等*/
				justify-content: space-between;				
				/*两端对齐,项目之间的间隔都相等*/
				align-content: space-between;
			}
			.zxw{
				width: 120px;line-height: 50px;
				text-align: center;color: #fff;
				/*margin-top: 10px;*/
				height: 50px;
			}
			#n1{
				background: red;width: 50px;
				flex-grow: 1;
			}
			#n2{
				 background: green;width: 70px;
				 flex-grow: 2;
			}
			#n3{
				 background: blue; width: 100px;
				 flex-grow: 3;
			}
		</style>
	</head>
	<body>
		<!--设置弹性元素的扩展比率来分配剩余空间:-->
		<!--flex-grow: 0;未设置默认为0-->	
		
		<ul class="box">
			<li id="n1" class="zxw">zxw1</li>
			<li id="n2" class="zxw">zxw2</li>
			<li id="n3" class="zxw">zxw3</li>
		
		
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23693.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!