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

> Clean Markdown view of GeekNews topic #26161. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=26161](https://news.hada.io/topic?id=26161)
- GeekNews Markdown: [https://news.hada.io/topic/26161.md](https://news.hada.io/topic/26161.md)
- Type: news
- Author: [carnoxen](https://news.hada.io/@carnoxen)
- Published: 2026-01-27T15:03:16+09:00
- Updated: 2026-01-27T15:03:16+09:00
- Original source: [webkit.org](https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/)
- Points: 6
- Comments: 0

## Summary

**CSS의 새로운 레이아웃 흐름 제안인 ‘Item Flow’**는 Flexbox와 Grid의 속성을 하나로 묶어, 레이아웃 정의 방식을 단순화하려는 시도입니다. `item-direction`, `item-wrap`, `item-pack`, `item-slack` 같은 공통 프로퍼티를 통해 기존 `flex-*`, `grid-*` 속성을 통합하고, **Masonry 레이아웃까지 자연스럽게 구현**할 수 있도록 설계되었습니다. 이 제안이 표준화되면, 개발자는 더 일관된 문법으로 다양한 레이아웃을 구성할 수 있게 됩니다.

## Topic Body

#### 배경  
오랜 시간이 흐르면서 Flexbox와 Grid 레이아웃은 CSS만으로 가능해졌으나,   
Masonry 레이아웃은 아직까지도 JavaScript의 힘을 빌려야 했습니다. 이 레이아웃 때문에 브라우저 간 여러 논의가 진행되었습니다. Chrome은 새로운 레이아웃을 구현했고(`display: masonry`), Firefox와 Safari는 `grid-template-*: collapse`를 설정하는 방법으로 구현했습니다.  
  
하지만 누군가가 [기존과 아주 색다른 방안](https://github.com/w3ctag/design-reviews/issues/1003#issuecomment-2489688718)을 내놓았습니다. Masonry, Grid, Flexbox 레이아웃을 하나로 통합하자는 의견이었습니다.  
  
#### Flexbox와 Grid의 흐름을 하나로  
기존 내부 요소의 흐름을 설정하는 방법은 각 레이아웃마다 달랐습니다.  
```css  
.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` 프로퍼티를 대신합니다.  
```css  
.container {  
    item-direction: row | row-reverse | column | column-reverse;  
}  
```  
  
##### `item-wrap`  
내부 요소를 나열할 때 한 줄이 넘칠 시, 행동과 방향을 정의합니다. `flex-wrap` 프로퍼티를 대신합니다.  
```css  
.container {  
    item-wrap: auto || [[nowrap | wrap] | [normal | reverse]];  
}  
```  
Grid 레이아웃은 기본적으로 `wrap` 방식이지만, `item-wrap: nowrap`으로 설정하면 모든 요소가 한 줄로만 나열되고, 너비까지 똑같은 레이아웃을 만들 수 있습니다.  
  
##### `item-pack`  
내부 요소를 쌓는 방법을 정의합니다. `grid-auto-flow: dense` 프로퍼티를 대신합니다.  
```css  
.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`](https://github.com/w3c/csswg-drafts/issues/10884)로 확정되었습니다.)  
  
#### 한데 모아  
이제 아래로 나열하는 Flexbox를 만들 때 이렇게 설정하면 됩니다.  
```css  
.container {  
    display: flex;  
    item-direction: column;  
    item-wrap: nowrap;  
}  
```  
  
더 짧은 방법도 나올 예정입니다.  
```css  
.container {  
    display: flex;  
    item-flow: column nowrap;  
}  
```  
  
이 프로퍼티의 이름과 작동 방식은 논의 중에 있습니다.  
  
---  
  
현재 Masonry 레이아웃은 `display: grid-lanes`로 변경되었습니다. 하지만 `item-*` 프로퍼티는 아직 긍정적으로 논의하고 있습니다.  
  
* [Unifying grid-auto-flow and flex-flow(item-flow 관련 논의)](https://github.com/w3c/csswg-drafts/issues/11480#issuecomment-3648421097)  
* [Decide on a name for item-slack(flow-tolerance로 확정)](https://github.com/w3c/csswg-drafts/issues/10884)  
* [Brick by brick: Help us build CSS Masonry](https://developer.chrome.com/blog/masonry-update?hl=ko)  
* [CSS Grid Lanes](https://news.hada.io/topic?id=25205)  
  
개인적으로, 하나로 통합할 때 `display: flex`나 `grid`도 생략할 수 있으면 좋겠습니다.

## Comments



_No public comments on this page._