flex-shrink计算

最新推荐文章于 2024-07-02 21:01:29 发布
最新推荐文章于 2024-07-02 21:01:29 发布
阅读量1.5k 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40285497/article/details/80523526
版权 
flex-shrink的计算和flex-grow是不同的，flex-shrink不同项有权重不同，下面举个例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 200px;margin: auto;border: 1px solid #000;display: flex">
    <div style="flex-shrink: 2;width: 150px;">one</div>
    <div style="flex-shrink: 1;width: 100px;">two</div>
</div>
</body>
</html>
 

总权重：2*150 + 1*100 = 400；
one所要减去的长度：50*2*150/400 = 37.5；（多出来的长度乘以此元素所占比例--2*150/400）
two所要减去的长度：50*1*100/400 = 12.5；
所以最终one长度为112.5，two长度为87.5； 

                

        

        

    

  


    

      

        

            

              
                
                  一叶知秋9307
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
flex-grow与 flex-shrink计算规则

				
			

			

				

					算云烟
				

				

					08-11
					
					928
					
				

			

		

		

			
				
一、flex-grow的计算规则
首先给定一个弹性容器（宽800px）和几个弹性元素（宽100px）

分别设定前三个弹性元素的所占放大比例flex-grow为1,2,3

那么它们的计算规则如下：

首先计算flex-grow份数，即 1+2+3 = 6，共计6份
第一个li的宽度 = 自身原有宽度(100px) + 剩余空间(300px)*所占比例(1/6) = 100px + 50px = 150px;
第二三个li的计算规则与上述一致，所以分别为200px,250px
后两个li因为没有设定flex

			
		

	



                

              
                



	

		

			

				
					
css弹性盒子-------桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解

					
热门推荐

				
			

			

				

					m0_37058714的博客
				

				

					06-21
					
					8万+
					
				

			

		

		

			
				
flex-grow、flex-shrink、flex-basis三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。(注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性：首先是   flex-basis  ，basis英文意思是&lt;主要成分&gt;，所以他和...

			
		

	



                


  
              

                


	

		

			

				
					
详解flex布局中flex-grow与flex-shrink的计算方式

				
			

			

				

					11-21
				

			

		

		

			
				
CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局，其中决定 Flex 布局内项目宽度/高度的是三个属性：
flex-basis, flex-grow, flex-shrink.
flex-basis
　　flex-basis 决定了项目占据主轴的空间，除非使用 box-sizing 进行设置，否则它将设置内容框的大小，因此当你指定一个flex项的大小时需要额外小心，因为它很肯能包含内边距与边框。
　　你可以为其指定一个具体的CSS尺寸值，也可以指定其占据父元素的百分比，它的默认值为 auto(根据内容自动调整大小)

<!-- demo-1 -->
  <div class="p

			
		

	





	

		

			

				
					
flex-shrink计算公式

				
			

			

				

					qq_37805832的博客
				

				

					09-18
					
					992
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		 *{
            marg

			
		

	



		

			
		



	

		

			

				
					
【CSS】如何实现分栏布局

					
最新发布

				
			

			

				

					读心悦
				

				

					07-02
					
					582
					
				

			

		

		

			
				
在CSS分栏布局中，设置宽度和样式是一个基本且重要的步骤。这可以通过直接应用样式到列元素（通常是div元素）上来实现。

			
		

	





	

		

			

				
					
关于flex-shrink如何计算的冷知识

				
			

			

				

					weixin_34408624的博客
				

				

					10-20
					
					501
					
				

			

		

		

			
				
先回顾一下flex-grow
假设有一个div内包含三个子div1， div2, div3,宽度分别200px.
对于flex-grow对于剩余空间分配比例的计算相信用过flex布局的都非常熟悉了。这里还是简单列一下计算公式：
假设div1, div2, div3的flex-grow分别设置为 1，2，3. 现在假定外层div的宽度是800px, 那么剩下的800px - 3*200px = 20...

			
		

	





	

		

			

				
					
flex布局中flex-shrink的计算规则

				
			

			

				

					a592024343的博客
				

				

					03-04
					
					513
					
				

			

		

		

			
				
下面代码来自MDN
html部分：


<p>the width of content is 500px, flex-basic of flex item is 120px.</p>
<p>A, B, C are flex-shrink:1. D and E are flex-shrink:2</p>
<p>the...

			
		

	





	

		

			

				
					
flex-shrink 计算规则

				
			

			

				

					gu2022_3_5_21_23的博客
				

				

					02-25
					
					580
					
				

			

		

		

			
				
【代码】flex-shrink 计算规则。

			
		

	





	

		

			

				
					
详解关于flex-shrink如何计算的冷知识

				
			

			

				

					09-22
				

			

		

		

			
				
这篇文章将深入探讨`flex-shrink`的计算方法。  首先，我们要理解`flex-shrink`的基本概念。当容器的总宽度小于其所有子元素的总宽度时，`flex-shrink`属性就起作用了。它的值决定了各个flex项目在空间不足时按什么...

			
		

	





	

		

			

				
					
CSS3 Flexbox中flex-shrink属性的用法示例介绍

				
			

			

				

					09-25
				

			

		

		

			
				
根据`flex-shrink`的计算公式：  实际宽度 = 计划宽度 - 总差值 * flex-shrink / (flex-shrink之和)  对于`#test1`，其收缩因子为1，对于`#test2`，收缩因子为0.5。因此，我们可以计算出它们的新宽度：  `#test1`: ...

			
		

	





	

		

			

				
					
flex-shrink计算规则

				
			

			

				

					霍霍的博客
				

				

					07-29
					
					358
					
				

			

		

		

			
				
flex-shrink: 代码如下


main{
  width: 600px;
  border: 1px solid #000;
  height: 100px;
  display: flex;
  box-sizing: border-box;
  
}
div{
  box-sizing: border-box;
  height: 100px;
  border-width: 1px;
  border-style: solid;
  border-color: red;
}
div:n...

			
		

	





	

		

			

				
					
flex-shrink:0

				
			

			

				

					weixin_51725685的博客
				

				

					03-02
					
					1332
					
				

			

		

		

			
				
flex-shrink:0

			
		

	





	

		

			

				
					
flex-shrink

				
			

			

				

					弱智de克星
				

				

					01-18
					
					937
					
				

			

		

		

			
				
flex-shrink

			
		

	





	

		

			

				
					
关于flex-grow，flex-shrink的计算

				
			

			

				

					Snoopyqiuer的博客
				

				

					10-11
					
					743
					
				

			

		

		

			
				
在介绍flex-grow，flex-shrink的计算之前，先明确两个概念：

元素的实际宽度 = 元素的左边框+元素的左内边距+元素的内容宽度+元素的右内边距+元素的右边框；
	元素的总占宽度 = 元素的左外边距+元素的左边框+元素的左内边距+元素的内容宽度+元素的右内边距+元素的右边框+元素的右外边距；
同时也可以先思考一下元素的padding、border、margin、box-sizing...

			
		

	





	

		

			

				
					
flex-shrink: 0 来固定元素不被挤压

				
			

			

				

					liubangbo的专栏
				

				

					06-28
					
					9549
					
				

			

		

		

			
				
看下代码：


​
<html>
  <head>
    <style type="text/css">
      .div-wrapper {
        width: 600px;
        background-color: grey;
        display: flex;
        justify-content: space-between;        
      }
      .input-cls{
        widt

			
		

	





	

		

			

				
					
CSS3的flex-grow和flex-shrink计算方法

				
			

			

				

					weixin_45517927的博客
				

				

					04-20
					
					518
					
				

			

		

		

			
				
介绍
flex-grow和flex-dhrink都是CSS3的新增的弹性盒子的属性。弹性盒子这种布局方式使得开发人员能够将网页在pc端和移动端的不同大小屏幕下能够以不同的布局正常显示。相对于浮动布局更加方便，不用为清除浮动想很多解决方法。并且元素大小也能随着屏幕大小缩放，用户在实际体验上感觉会很好。
来到正题，flex-grow和flex-shrink。前者是当容器下元素的(以下都以宽度为例，但不...

			
		

	





	

		

			

				
					
【踩坑记录】flex布局 flex-shrink: 0防止图片被压缩

				
			

			

				

					SSophia的博客
				

				

					01-12
					
					2103
					
				

			

		

		

			
				
flex布局  flex-shrink: 0防止图片被压缩
flex容器中，当空间不够的时候，flex-shrink不为0的元素会被压缩，所以解决的方法就是给图片设置：flex-shrink:0

上述图片代码：
  .basics-body {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin:16px;
      

			
		

	





	

		

			

				
					
flex-shrink 解决实际问题（flex-shrink:0避免图片被压扁）

				
			

			

				

					Kate_sicheng的博客
				

				

					06-22
					
					2万+
					
				

			

		

		

			
				
flex-shrink 属性指定了 flex 元素的收缩规则，默认值是1。在flex 元素的默认宽度之和大于容器的宽度时候，元素会发生收缩，其收缩的大小的依据是 flex-shrink 值。
子元素的宽度之和为 100+100+300+300=800px，每个子的默认flex-shrink值是1。
当父容器被压缩到小于800px的时候，比如压缩到560px时，里面的子元素也会被相应地压缩。各个子元素被压缩掉多少宽度呢？4个子div的宽度比是 1:1:3:3，4个子元素的默认flex-shrink值都是1，

			
		

	





	

		

			

				
					
【CSS基础】flex-shrink

				
			

			

				

					Milk~每天分享一点点，技术进步一点点
				

				

					08-31
					
					3866
					
				

			

		

		

			
				
flex-shrink
flex-shrink 属性指定了 flex 元素的收缩规则
含义及用法：
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。


flex-shrink用来干嘛呢？
比如你设置了一个父元素400px，然后来了三个子元素，宽度分别200px。 那么加起来600px。超了怎么办？还有得救。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值