CSS:flexboxの使いドコロと注意点

・折り返し(box-lines/flex-wrap)
display:box仕様でbox-linesにmultipleがあるがAndroidブラウザー4.3以下では対応していない。
>従来通りfloatを使う
Firefox(43.0.4)ではflex-wrap:wrapは動いている模様

・簡易なグリッドレイアウト代替
>display:tableのほうが低コスト
あくまでもflexboxでメリットが有るならやるべきか。

・最後の要素を幅を伸縮調整する(flex-grow)
>上記の折り返しがある場合はサポートブラウザを留意する

・並び順(reverse)
>row-reverseした時に右寄せになってしまうのは
justify-content: flex-end;
とすることで左寄せになる

columnの場合は特に癖はないので
JSなどでやっていたリストの降順、昇順ソートが簡易にできそうではある。

・並び順(order)
>数字の若いものが先頭に来る
flexbox 2009仕様(box)では初期値が1
nth-child(n)か class OR idで個別に指定する。
例えばアイテム全体にorder:2
先頭にしたいもののIDにorder:1としてもうまくいかなかった。

実際の動きはジェネレーターを参考にされたい
CodePen – Flexbox playgroung
Flexy Boxes — CSS flexbox playground and code generation tool
Visual Guide to CSS3 Flexbox: Flexbox Playground |

もし過去のバージョンに対応させられるコストがあるならAutoprefixer(Bracketsにプラグインを入れるのがお手軽)や
IE8、9に対応させるFlexibility(display:flex仕様)や
更新が止まってしまっているがdoctyper/flexie: Legacy support for the CSS3 Flexible Box Model(display:box仕様)などがポリフィルとして使えるだろう。

現時点ではPCではIE11、Chrome Firefoxの最新版
SPではiOS7以上のSafari Android4.4ブラウザー Chromeの最新版
のdisplay:flex仕様で製作可能なプロジェクトであれば使いドコロはあるだろう。

参考:Solved by Flexbox — クリーンでハックのない CSS

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中