在MDN上有關Flex佈局的屬性中。

對於flex-basis、flex-grow、flex-shrink三個屬性結合起來測試。

附連結，直接開啟在CodePen中修改測試。

拉到最後案例處，大概佈局結果圖就是，然後線上編輯：

先來看MDN中對 flex-basis 的解釋：

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

再看MDN中對 flex-shrink 的解釋：

CSSflex-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，根據上述該屬性的特性：

CSSflex-shrink 屬性指定了 flex 元素的收縮規則。

所以此時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; /* 修改處 */ 
}