RSS

Posts Tagged “CSS3”

flexboxの旧仕様、改定仕様、現行仕様の一覧

by tomita on 2013.9.10

[13/11/14 追記] flex-wrapの実装について注記を追加しました。 暑さもやわらいできたような気配がしてきました。皆様いかがお過ごしでしょうか。 久しぶりのブログ更新です。UIT 富田です。 今回はCSSでのレイアウトをより柔軟にしてくれるflexboxについて解説します。 flexboxは大幅な仕様の変更が過去に2度もあり、各ブラウザとそのバージョンによって実装している仕様が異なるため、後方互換をきっちり対応しようとすると、gradientと並んで2大考えるのをやめたくなるプロパティとなっております。 しかしflexboxを利用することで、現時点ではCSSだけでの対応が難しかったり、複数のプロパティを複雑に組み合わせる必要があるレイアウト(例えば一番大きい高さに揃えた要素を横に並べたり、子要素を上下左右中央位置したりといったもの)が、容易に利用できるようになるという大きなメリットもあり、使えるならば使っていきたいプロパティでもあります。 にも関わらずflexboxについて調べてみると、各仕様をまとめた記事はみつかるものの、新旧の仕様を横断的に確認できるものが見つからなかったため、後方互換をわかりやすく対応するためにまとめました。