本文共 1508 字，大约阅读时间需要 5 分钟。

在MDN上有关Flex布局的属性中。

对于flex-basis、flex-grow、flex-shrink三个属性结合起来测试。

附链接，直接打开在CodePen中修改测试。

flex-shrink（MDN）：  

拉到最后案例处，大概布局结果图就是，然后在线编辑：

先来看MDN中对 flex-basis 的解释：

 属性 flex-basis 指定了flex 元素在主轴方向上的初始大小。

再看MDN中对 flex-shrink 的解释：

 flex-shrink 属性指定了 flex 元素的收缩规则。

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

在flex-shrink属性的CodePen中，我们把css中.box1 样式值改一下（有关修改代码在文章最下方已附上）

.box1 {   flex-shrink: 5; /*由2改成5,另A、B、C 与 D、E 的宽度对比更明显*/}

这个例子中 flex-basis的属性值是120px，即<div id="content"></div>里边的每个项目的宽度的初始大小为120px，

ABCDE加起来宽度一共是600px，超过了#content容器盒的预设宽度500px，

此时flex-shrink的收缩规则在这些flex元素中就能生效了，从而根据其值显示以上效果。

那么反过来思考，当ABCDE项目宽度之和小于或者等于#content容器盒（500px）的宽度时候，flex-shrink属性将不再生效。

即将 ABCDE五个项目的 flex-basis 属性值由原来的120px 修改到 90px，A、B、C与D、E将不再进行缩放。

#content div {  flex-basis: 90px; /* 由120px改为90px */  border: 3px solid rgba(0,0,0,.2);}

当每个项目的初始大小flex-basis 从120px变为90px后，每个项目的实际宽度为96px（容器content下的每个div设置的有border：3px.）

而五个96px的总长度小于容器预设长度 500px，根据上述该属性的特性：

 flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

所以此时flex-basis属性将不再生效。div不会进行缩放。

附源码：（在MDN案例上修改过的）

the width of content is 500px, flex-basic of flex item is 120px.
A, B, C are flex-shrink:1. D and E are flex-shrink:2
the width of D is not the same as A's
   
  
    
     A
    
  
    
     B
    
  
    
     C
    
  
    
     D
    
  
    
     E
    
   

#content {  display: flex;  width: 500px;}#content div {  flex-basis: 120px;  /* 修改处 */  border: 3px solid rgba(0,0,0,.2);}.box {   flex-shrink: 1;}.box1 {   flex-shrink: 5; /* 修改处 */ }