flex布局撑满屏幕（完美解决：flex布局中设置宽度被压缩的问题）

问题描述：

在父级中设置了display:flex;父元素宽度不够的时候 
  
  
  
  
  
  
  ，子元素就算设置的宽度 
  
  
  
  
  
  
  
，也会被压缩；

产生原因：

当子元素设置固定宽度

 


 


 


 


 


 


 

，如果整体宽度不足时 
 
 
 
 
 
 
 ，会把固定宽度给压缩

解决方法: 给固定宽度的元素添加flex-shrink:0

flex-shrink:0;

实例解析：

flex-shrink的默认值为1 
   
   
   
   
   
   
   
，如果没有显示定义该属性
 

 

 

 

 

 

 
，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩 
  
  
  
  
  
  
  。

本例中A 
  
  
  
  
  
  
  、B 
  
  
  
  
  
  
  
、C 显式定义了 flex-shrink 为 1
 

 

 

 

 

 

 

 ，D

 


 


 


 


 


 


 

、E 定义了 flex-shrink 为 2              ，所以计算出来总共将剩余空间分成了 7 份 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，其中 A 
 
 
 
 
 
 
 、B 
   
   
   
   
   
   
   
、C 占 1 份














，D
 

 

 

 

 

 

 
、E 占 2 份                      ，即1:1:1:2:2

我们可以看到父容器定义为 500px 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，子项被定义为 120px





















，子项相加之后即为 600 px               ，超出父容器 100px 
  
  
  
  
  
  
  
。那么超出的 100px 需要被 A
 

 

 

 

 

 

 

 、B              、C 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
、D














、E 消化 通过收缩因子 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，所以加权综合可得 100*1+100*1+100*1+100*2+100*2=700px

 


 


 


 


 


 


 

。

于是我们可以计算 A                      、B 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
、C





















、D               、E 将被移除的溢出量是多少：

A 被移除溢出量：(100*1/700)*100














，即约等于14px B 被移除溢出量：(100*1/700)*100 
  
  
  
  
  
  
  ，即约等于14px C 被移除溢出量：(100*1/700)*100 
  
  
  
  
  
  
  
，即约等于14px D 被移除溢出量：(100*2/700)*100

 


 


 


 


 


 


 

，即约等于28px E 被移除溢出量：(100*2/700)*100 
 
 
 
 
 
 
 ，即约等于28px

最后A 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
、B














、C 
  
  
  
  
  
  
  、D 
  
  
  
  
  
  
  
、E的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px 
   
   
   
   
   
   
   
，此外
 

 

 

 

 

 

 
，这个宽度是包含边框的 
 
 
 
 
 
 
 。

<div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> </div>