要約

  • W3Cが2009年7月23日に公開した最初のFlexible Box Layout作業草案は、箱に余裕があれば子要素を広げ、足りなければ縮める仕組みを記した。当時の語彙にはbox-flexがあった。
  • 2012年9月18日の勧告候補はdisplay: flexと成長・縮小・基準サイズを定めた。2018年11月19日の勧告候補は、画面上の並びを変えても文書、読み上げ、キーボードの順序は変わらないと注意を促した。

道具バーの三人兄弟は、幅の変わる部屋に住んでいた。検索欄はもっと伸びたい。長い名前のボタンは一文字も立たせたくない。残りのボタンは今の場所で満足していたが、壁が近づくとそうも言っていられない。幅を固定した家具の並べ方は、小さな窓でたちまち窮屈になる。Flexboxは親の箱に分配規則を渡した。家族会議が平和になったわけではない。けれど計算の仕方は決まった。

W3Cが2009年7月23日に公開した最初のFlexible Box Layout作業草案は、画面の部品を並べるための箱を描いた。子要素は横にも縦にも置け、余った空間を受け取ったり、不足時に縮んだりできる。文書はXULのインターフェースに使われた箱のモデルを基にすると記している。当時のCSSにはdisplay: box、box-orient、box-flex、box-linesが登場した。初期の言葉をそのまま今の書き方だと思って貼り付けると、歴史とスタイルシートの両方が困る。

box-flexは相対的な柔軟さを表した。値が二の子は一の子より大きな分け前を得られる。ただし上限の幅に達すればそれ以上は広がらず、残りはほかの子へ回る。中身本来の寸法や最小幅も交渉の条件だ。親が部屋を用意し、子は決められた範囲で取り分を得る。窓を開いたり縮めたりするたびに家具を釘で打ち直すより、ずっと扱いやすい。

2012年9月18日のW3C勧告候補では、規則が組み直された。display: flexやinline-flexが容器を作る。要素は主軸に沿って並び、もう一方に交差軸がある。flexという短い指定には、出発点の大きさを決める基準、余った場所を受け取る成長率、足りない時に譲る縮小率が入る。検索欄に余白を渡し、メニューボタンには使える大きさを残す。窓が狭まればブラウザーが計算をやり直す。

二という数値が、最終的な幅を必ず隣の二倍にするわけではない。最初の基準サイズと上限、下限がそれぞれ違う。正の余白は成長率で分け、不足は縮小率などを使って処理する。知りたいのは容器が変化した時、誰がその変化を引き受けるかである。作者が関係をCSSに書けば、ブラウザーは新しい窓幅ごとに計算できる。

部屋には向きもある。横一列を反対方向にしたり、縦に積んだりできる。折り返しを許せば、入りきらない子は次の行へ行く。二つの軸に沿う配置も決められる。横の箱を縦の箱に入れれば複雑な画面も組めるが、一つ一つの容器は自分の主軸で空間を調整する。行と列の全体計画を先に引くCSS Gridとは、ここに別の仕事がある。

やがて子どもたちは席替えを覚えた。2012年の文書にあるorderは、画面上で見える順番を変える。しかし読み上げと通常の順次ナビゲーションは、元の文書順を進む。見た目では最初のボタンが、キーボードでは後から現れることがある。マウスを持つ読者の地図と、Tabキーを押す読者の地図が食い違う。席替えの写真を撮り直しても、名簿はそのままだった。

2018年11月19日のW3C勧告候補はこの点を改めて強調した。orderや逆向きの指定は見た目のためのもの。間違った文書順を直す代わりにはならない。さらに余白の計算には細かな条件がある。成長率が一未満なら、正の空間が一部残る場合がある。「伸びる」は最後の一画素まで必ず食べるという意味ではない。末尾の空きは、ブラウザーが規則に忠実な証拠かもしれない。

翻訳によってボタンの文字が長くなると、出発点から変わる。最小幅を持つ要素は、ほかの子ほど縮めない。折り返しが起これば次の行でまた分配が始まる。Flexboxはこうした変化に反応するが、どの操作が読者に重要かを勝手に判断しない。何を先に見せ、どの順番で使ってもらうかは制作側の決定だ。その後で基準、伸縮率、配置を選ぶ。

親の箱は、増減する部屋の管理人になった。子どもは宣言された分け前と制限に従い、ブラウザーは窓が動くたびに計算をやり直す。作者が先に意味の通る文書順を作り、柔軟な幅を任せればよい。子ども同士は余白を相談してかまわない。読者まで二枚の違う案内図と交渉させないでほしい。