flex order, grow, shrink, basis, 속기

See the Pen flex item by nilgi (@nilgi) on CodePen.

 

<p style="order: 2">1</p>
<p style="order: 3">2</p>
<p style="order: 1">3</p>
<p style="order: 4">4</p> / 아이템의 순서 변경

<p style="flex-grow: 1">1</p>
<p style="flex-grow: 1">2</p>
<p style="flex-grow: 7">3</p>
<p style="flex-grow: 1">4</p> / 아이템 길이 비율

<p style="flex-shrink: 0">3</p> / 지정한 값으로 축소하지 않고 표시

<p style="flex-basis: 150px;">2</p> / 기본값을 무시하고 지정한 값 적용

<p style="flex: 0 0 200px;">2</p> / grow, shrink, basis 속기