Item Flow 1부: CSS의 새로운 웹 구조 설정 방식

배경

오랜 시간이 흐르면서 Flexbox와 Grid 레이아웃은 CSS만으로 가능해졌으나,
Masonry 레이아웃은 아직까지도 JavaScript의 힘을 빌려야 했습니다. 이 레이아웃 때문에 브라우저 간 여러 논의가 진행되었습니다. Chrome은 새로운 레이아웃을 구현했고(display: masonry), Firefox와 Safari는 grid-template-*: collapse를 설정하는 방법으로 구현했습니다.

하지만 누군가가 기존과 아주 색다른 방안을 내놓았습니다. Masonry, Grid, Flexbox 레이아웃을 하나로 통합하자는 의견이었습니다.

Flexbox와 Grid의 흐름을 하나로

기존 내부 요소의 흐름을 설정하는 방법은 각 레이아웃마다 달랐습니다.

.container {  
    /* Flexbox */  
    flex-direction: row | row-reverse | column | column-reverse;  
    flex-wrap: nowrap | wrap | wrap-reverse;  
    /* flex-direction + flex-wrap */  
    flex-flow: <flex-direction> <flex-wrap>;  
  
    /* Grid */  
    grid-auto-flow: row | column | dense;  
}  

이 기능은 아래와 같은 기능으로 통합될 예정입니다.

• item-direction
• item-wrap
• item-pack
• item-slack

item-direction

내부 요소가 흐르는 방향을 정의합니다. flex-direction, grid-auto-flow 프로퍼티를 대신합니다.

.container {  
    item-direction: row | row-reverse | column | column-reverse;  
}  

item-wrap

내부 요소를 나열할 때 한 줄이 넘칠 시, 행동과 방향을 정의합니다. flex-wrap 프로퍼티를 대신합니다.

.container {  
    item-wrap: auto || [[nowrap | wrap] | [normal | reverse]];  
}  

Grid 레이아웃은 기본적으로 wrap 방식이지만, item-wrap: nowrap으로 설정하면 모든 요소가 한 줄로만 나열되고, 너비까지 똑같은 레이아웃을 만들 수 있습니다.

item-pack

내부 요소를 쌓는 방법을 정의합니다. grid-auto-flow: dense 프로퍼티를 대신합니다.

.container {  
    item-pack: normal | dense;  
}  

Flexbox 레이아웃은 없었지만, item-pack: dense 기능이 생기면서 Grid처럼 똑같은 방식으로 쌓을 수 있습니다. 예를 들어서 기존 wrap 기능이 설정된 Flexbox는 요소를 쌓는 중, 한 줄의 공간이 요소의 너비보다 작을 때 무조건 다음 줄로 넘어가는 방식이었다면, 다음부턴 그 이전 줄에 해당 요소가 들어갈 수 있는 공간이 있으면, 그 곳에 먼저 넣는 방식으로 구현할 수 있습니다.

또한 기존에 없었던 새로운 방식도 추가할 수 있습니다.

• item-pack: balance: text-wrap: balance처럼, 각 줄에 있는 요소의 개수를 다른 줄과 유사하게 맞출 수 있습니다.
• item-pack: collapse: 최종 목표인 Masonry 레이아웃을 손쉽게 구현할 수 있습니다.

item-slack

내부 요소를 쌓으면서 한 줄마다 최소한 남길 여유 공간의 크기를 설정하는 프로퍼티입니다. 기존에 제안되었던 grid-slack, masonry-slack 프로퍼티를 대신합니다. item-slack의 이름은 아직 논의 중에 있습니다.(역자 주: 현재 flow-tolerance로 확정되었습니다.)

한데 모아

이제 아래로 나열하는 Flexbox를 만들 때 이렇게 설정하면 됩니다.

.container {  
    display: flex;  
    item-direction: column;  
    item-wrap: nowrap;  
}  

더 짧은 방법도 나올 예정입니다.

.container {  
    display: flex;  
    item-flow: column nowrap;  
}  

이 프로퍼티의 이름과 작동 방식은 논의 중에 있습니다.

---

현재 Masonry 레이아웃은 display: grid-lanes로 변경되었습니다. 하지만 item-* 프로퍼티는 아직 긍정적으로 논의하고 있습니다.

• Unifying grid-auto-flow and flex-flow(item-flow 관련 논의)
• Decide on a name for item-slack(flow-tolerance로 확정)
• Brick by brick: Help us build CSS Masonry
• CSS Grid Lanes

개인적으로, 하나로 통합할 때 display: flex나 grid도 생략할 수 있으면 좋겠습니다.