flex-shrink和flex-grow的区别

最新推荐文章于 2023-09-25 23:50:47 发布

qq_43102118

最新推荐文章于 2023-09-25 23:50:47 发布

阅读量527

点赞数 1

文章标签： css web 前端

本文链接：https://blog.csdn.net/qq_43102118/article/details/106166025

版权

flex-shrink和flex-grow的区别

flex-shrink:当主轴方向显示不下所有项目时，项目是否进行压缩。默认值为1；取正整数，最小值为0，为0时表示不压缩。
那么如何压缩？
简单的思路：把主轴方向不够的部分，按照几个项目的值进行压缩。
实施的代码如下：

<style>
     #parent{
	   width:500px;
	   height:400px;
	   border:2px solid #f00;
	   display:flex;
	 }
	  #d1,#d2,#d3{
	     width:200px;
		 height:200px;
		 border:2px solid #f0f;
		 font:40px jokerman;
	  }
	   #d1{
	     background:#ffa; 
		 flex-shrink:1;
	  }
	   #d2{
	     background:#aff;
		 flex-shrink:10;
	  }
	   #d3{
	     background:#faf;
		 flex-shrink:100;		
	  }
  </style>
 </head>
 <body>
  <div id="parent">
     <div id="d1">1</div>
	 <div id="d2">2</div>
	 <div id="d3">3</div>
  </div>
 </body>

设置一个大的div，里面包含3个小的div，大的div设置的宽度为500px，小的div宽度都设置200px，可以看出，还差100px才能容下小的div，这时需要给小的div进行压缩。给3个小的div设置不同的flex-shrink值，分别为1,10,100.。
id为d1的div最后压缩的值为：1001/(1+10+100)
id为d2的div最后压缩的值为：10010/(1+10+100)
id为d3的div最后压缩的值为：100*100/(1+10+100)
最后可以看出d1压缩最小，d3压缩最大；
最后的效果：
在这里插入图片描述
flex-grow：当主轴方向有剩余的空间，项目是否增长，默认值为0，为0时表示不增长。
如何增长？
简单的思路：把主轴剩余的空间，按照几个项目的取值进行分配，和flex-shrink相反。
实施的代码如下：

<style>
     #parent{
	   width:700px;
	   height:400px;
	   border:2px solid #f00;
	   display:flex;
	 }
	  #d1,#d2,#d3{
	     width:200px;
		 height:200px;
		 border:2px solid #f0f;
		 font:40px jokerman;
	  }
	   #d1{
	     background:#ffa; 
		 flex-grow:1;
	  }
	   #d2{
	     background:#aff;
		 flex-grow:10;
	  }
	   #d3{
	     background:#faf;
		 flex-grow:100;		
	  }
  </style>
 </head>
 <body>
  <div id="parent">
     <div id="d1">1</div>
	 <div id="d2">2</div>
	 <div id="d3">3</div>
  </div>
 </body>

基本和flex-shrink案例一样，只是改了大的div的宽度为700px，小的div宽度都设置200px，可以看出，多出了100px，这时需要给小的div进行增长。给3个小的div设置不同的flex-grow值，分别为1,10,100.。
id为d1的div最后增长的值为：1001/(1+10+100)
id为d2的div最后增长的值为：10010/(1+10+100)
id为d3的div最后增长的值为：100*100/(1+10+100)
最后可以看出d1增长最小，d3增长最大；
最后效果：
在这里插入图片描述

qq_43102118

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex-shrink和flex-grow的区别

flex-shrink和flex-grow的区别flex-shrink:当主轴方向显示不下所有项目时，项目是否进行压缩。默认值为1；取正整数，最小值为0，为0时表示不压缩。那么如何压缩？简单的思路：把主轴方向不够的部分，按照几个项目的值进行压缩。实施的代码如下：<style> #parent{ width:500px; height:400px; border:2px solid #f00; display:flex; } #d1,#
复制链接

扫一扫