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

<h2>.z.a>*{flex-grow:0} // 팽창하지 않음. 0+(300/<strong>0</strong>)*1=0</h2>
<div class="a z">
  <div></div>
  <div></div>
  <div></div>
</div>

<h2>.z.b>*{flex-grow:1} // 균등 팽창. 0+(300/<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-grow:2} // 0+(300/<strong>4</strong>)*2=150<br>
  .z.c>:first-child~*{flex-grow:1} // 0+(300/<strong>4</strong>)*1=75
</h2>
<div class="c z">
  <div>150px</div>
  <div>75px</div>
  <div>75px</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:0;}
.z>:nth-child(1){background:red;}
.z>:nth-child(2){background:green;}
.z>:nth-child(3){background:blue;}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.