<h2>.z>*{width:0}</h2>
<ul>
  <li>flex container 내부의 free space 값 계산 편의를 위해 모든 flex item 박스에 <b>width:150px</b> 설정.</li>
  <li>따라서 아래 예제 flex container 내부의 free space 값은 현재 모두 <b>-150px</b>으로 동일하다.</li>
  <li>붉은색으로 강조한 숫자 '<strong>0</strong>, <strong>3</strong>, <strong>6</strong>'은 flex container 내부 수축지수(flex-shrink)의 총 합이다.</li>
  <li>수축지수의 총 합은 실제 DOM에 적용된 flex-shrink 값의 총 합이다.</li>
  <li>박스 기본 크기 + ( free space / 수축지수 총 합 ) * flex-shrink 값 = flex item 크기.</li>
</ul>
<p>!<strong>유의사항</strong>: 이 예제는 계산 편의를 위해 flex-basis 값을 모두 '150px'으로 동일하게 처리했음. 그러나 플렉스 아이템마다 flex-basis 값 또는 width 또는 height 값이 다른 경우 수축 지수에 영향을 미치기 때문에 예제에서 제시한 공식을 사용할 수 없음. 플렉스 아이템의 크기가 각자 다른 경우 free space는 균등하게 분배되지 않고 플렉스 아이템 크기에 정비례하여 분배 됨.</p>

<h2>.z.a>*{flex-shrink:0} // 수축하지 않음. 150+(-150/<strong>0</strong>)*1=150</h2>
<div class="a z">
  <div>150px</div>
  <div>150px</div>
  <div>150px</div>
</div>

<h2>.z.b>*{flex-shrink:1} // 균등 수축. 150+(-150/<strong>3</strong>)*1=100</h2>
<div class="b z">
  <div>100px</div>
  <div>100px</div>
  <div>100px</div>
</div>

<h2>
  .z.c>:first-child{flex-shrink:4} // 150+(-150/<strong>6</strong>)*4=50<br>
  .z.c>:first-child~*{flex-shrink:1} // 150+(-150/<strong>6</strong>)*1=125
</h2>
<div class="c z">
  <div>50px</div>
  <div>125px</div>
  <div>125px</div>
</div>

.z{display:flex;width:300px;height:32px;background:silver;color:white;outline:5px solid black;margin-bottom:2em;text-align:center;}

.z>*{width:150px;}
.z>:nth-child(1){background:red;}
.z>:nth-child(2){background:green;}
.z>:nth-child(3){background:blue;}

.z.a>*{flex-shrink:0;}
.z.b>*{flex-shrink:1;}
.z.c>:first-child{flex-shrink:4;}
.z.c>:first-child~*{flex-shrink:1;}