Item Flow 第1部: CSSの新しいWebレイアウト定義方式

背景

長い年月を経て、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

内部要素を並べる際、1 行に収まりきらない場合の挙動と方向を定義します。flex-wrap プロパティの代わりになります。

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

Grid レイアウトは基本的に wrap 方式ですが、item-wrap: nowrap に設定すると、すべての要素が 1 行にだけ並び、幅まで同じレイアウトを作れます。

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 も省略できるとよいと思います。