간단한 레이아웃 처리시에는 flex 기능이 매우 편리하다. 자식 요소들에 대한 가로 배치를 단지 부모 요소에게 display: flex; 처리만으로도 간단하게 작동한다.

물론 레이아웃 항목에 대한 너비도 flex-basis 속성을 통해서 지정할 수도 있다.

이제 부모 영역과의 관계를 확인해 보자.

모든 레이아웃 항목에게 똑같은 너비를 갖게 하면 부모의 공간이 남을 수도 있다. 사실 이 상태에서 레이아웃 항목들을 정렬시켜 원하는 레이아웃을 얻을 수도 있다.

하지만 부모 공간을 모두 활용하기 위해 특정 레이아웃 항목에게 너비를 지정하고 나머지 레이아웃 항목이 남은 공간을 갖게 하고 싶다면 이게 뜻대로 되지 않는다.

두 번째 레이아웃 항목에게 너비를 명시하지 않으면 나머지 공간을 가질 것이라 생각할 수 있지만 실제로는 그렇지 않다. 자신이 가지고 있는 콘테츠를 담기 위해서 최대한 너비를 요구한다. 이것은 flex-shrink 속성과 연관되어 있다. 축소 비율을 설정하는 이 속성의 기본값이 1이다. 따라서 flex-basis 속성으로 너비를 지정했지만 너비가 지정되지 않은 레이아웃 항목의 콘텐츠가 우선적으로 자리를 차지하도록 하기 위해서 flex-shrink 속성이 작동하는 것이다.

해결은 간단하다. 너비를 지정한 레이아웃 항목이 가지고 있는 flex-shrink 속성의 값을 0으로 지정하면 된다.