おもしろい！Stephen Hayの書いたLearn You a Flexbox for Great Good!というCSS Flexible Box Layout Moduleについての記事がとても良かったので「Flexbox、おもしろいですよ？」というタイトルで日本語に訳した。もう一回言うけど、おもしろい！
まぁ細かくは翻訳の方を読んでもらうとして、ざっとさわりというか読むにあたって知っとくと良さそうなことだけちょっと結構書く。
Flexboxはリサイズされたりとかした時に、それに合わせて並んだボックスをそれぞれ割合でリサイズさせたり、あるものだけリサイズするようにしたり、リサイズはしないけど位置をずらしたり(右や中央寄せとかだけでなく均等割付とかも)とかするもの。FirefoxのUIやアドオンでは既に普通に使われている(Web標準を目指しているものとはちょっと違うけど)。いわゆる普通のデスクトップ・アプリケーションのUIコンポーネントの配置を行うのに都合が良い物みたいなイメージで良いと思う。それを利用してfloatプロパティーの代わりにカラム・レイアウトに使ったりとかもできる優れもの(名前からするとCSS Multi-column Layout Moduleの方が向いてそうだけど、Multicolはちょっと用途が違う)。
特にフォーム部品のようななるべく固定サイズではなく領域に合わせて拡大・縮小してくれると良いもののレイアウトに威力を発揮する。単なるリサイズに留まらず折り返しなども定義できるので、広いデスクトップでは一列にずらっと並べ、狭いモバイル機器では複数行に分けるとかもそれらのサイズをあまり気にすることなく気軽にポンポン配置できる。レスポンシブ！
翻訳でも触れることになるがflex-orderプロパティーによってHTMLでの出現順序に依存しないレイアウトをCSSのみでさっくり実装できるのもすごい。使いすぎると混乱することには勿論なるだろうが、ソースコードの順序に束縛されないというのは単にデザイン上の利点だけでなく、バックエンド側がHTMLを強く意識しなくても良くなるというような利点もあるはずだ。
この翻訳では簡単なサンプル・ページを使ってこういったFlexboxのフレキシブルさを説明していくことになる。エディターでサンプル・ページを編集しても良いし、そうするのが確実だとは思うけど、面倒な人はChromeのDeveloper Toolsでサンプル・ページをガシガシいじるのが良いと思う。コード補完(一部でバグるけど)があったりとかいろいろ楽なので。
また、現時点での最新安定版であるChrome 17は既にこの記事で触れられるFlexboxのプロパティーに対応しているので、元記事のようにChrome Canaryをわざわざ別にインストール必要はない。Vimはインストールしましょう(てへぺろ)。
ついでと言ってはなんだけど、vim-css3-syntaxのcss3-flexbox.vimも更新した。古い文法のサポートを削除した時にざっと古い仕様も読んでみたんだけど、flex-direction: lrとかbox-orient: block-axisとか何考えてたんだこれ……みたいな感じで、最新の仕様はよく考えられてるなーと改めて思った。最後にもう一回、Flexboxおもしろい！