Flex弹性布局之flex-basis、flex-grow、flex-shrink分析

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

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

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

flex-shrink（MDN）：  https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink

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

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

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

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

CSS 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，根据上述该属性的特性：

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

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

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

<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 width of D is not the same as A's</p>
<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>

#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; /* 修改处 */ 
}