カテゴリー

キーワード

 
> Flexboxの書き方 IE10、Safa...

Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編1】を紹介します【2015年4月現在】


2015 年 4 月 27 日 投稿    view: 29869
タグ:
このエントリーをはてなブックマークに追加

css Flexbox ブラウザ対策2

こんにちは、WEBマーケティング部の杉尾です。


今回と次回で、『2015年4月現在、Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編】』を紹介します。


今回はFlexboxのIE10、Safari、iOS Safari、Androidブラウザへの対応実践編の第一回です。



各プロパティの書き方


はじめに

Flexboxは過去に二度大きな仕様変更がありました。
それぞれを古い順に、『box仕様』、『flexbox仕様』、『flex仕様』(現行)と呼称します。


IE10はベンダープレフィックス(-ms-)付きで『flexbox仕様』に対応している唯一のブラウザです。


iOS 6.1以前のSafari、Android4.3以前のAndroidブラウザは、ベンダープレフィックス(-webkit-)付きで『box仕様』に対応しています。


それぞれ現行のプロパティ(見出しが現行)を元に、『box仕様』、『flexbox仕様』の対応を記していきます。


参考ソース中の『.foo』はflexコンテナを、『.foo_child』はflexアイテムを示しています。


display:flex;(flex仕様)

display:flex;についての詳しい説明はコチラ
【CSS】Flexboxのプロパティ(flex-direction、flex-wrap、flex-flow、order)を紹介します


仕様 プロパティ
box display box inline-box
flexbox flexbox  inline-flexbox
flex flex  inline-flex

参考ソース

.foo {
    display:-webkit-box;/*--- Androidブラウザ用 ---*/
    display:-ms-flexbox;/*--- IE10 ---*/
    display:-webkit-flex;/*--- safari(PC)用 ---*/
    display:flex;
}

display:flex;だけは、値であるflexの前に『-webkit-』をつけてください。
他のプロパティはプロパティ名の直前にベンダープレフィックスをつけます。


flex-directionプロパティ(flex仕様)

flex-directionプロパティについての詳しい説明はコチラ
【CSS】Flexboxのプロパティ(flex-direction、flex-wrap、flex-flow、order)を紹介します


仕様 プロパティ
box box-orient horizontal  vertical  inline-axis  block-axis  inherit
box-direction normal  reverse  inherit
flexbox flex-direction row  row-reverse column  column-reverse
flex

参考ソース

.foo {
    display:-webkit-box;/*--- Android旧ブラウザ用 ---*/
    display:-ms-flexbox;/*--- IE10 ---*/
    display:-webkit-flex;/*--- safari(PC)用 ---*/
    display:flex;
    -webkit-box-direction:reverse;/*--- Androidブラウザ用 ---*/
    -webkit-flex-direction:row-reverse;/*--- safari(PC)用 ---*/
    flex-direction:row-reverse;
}

******
注意点
******
『-webkit-box-direction:reverse;』で逆方向から並びますが、要素自体が逆側に寄るわけではありません。
『flex-direction:row-reverse;』と同じように、要素を逆側に寄せるためには、同時に『-webkit-box-pack:end;』を指定する必要があります。


flex-wrapプロパティ(flex仕様)

flex-wrapプロパティについての詳しい説明はコチラ
⇒【CSS】Flexboxのプロパティ(flex-direction、flex-wrap、flex-flow、order)を紹介します


【box】仕様に『box-lines』というプロパティが存在していますが、Androidの旧ブラウザ(とiOS6.1以前)は対応していません。
つまりAndroidの旧ブラウザ(とiOS6.1以前)では、flexコンテナに入りきらないflexアイテムを、『そのまま一行で表示するか、折り返して複数行にするか』を指定することができません。


ですので、IE10とSafari用のみ記述します。


仕様 プロパティ
box box-lines single  multiple
flexbox flex-wrap nowrap  wrap  wrap-reverse
flex

参考ソース

.foo {
    display:-ms-flexbox;/*--- IE10 ---*/
    display:-webkit-flex;/*--- safari(PC)用 ---*/
    display:flex;
    -ms-flex-wrap:wrap/*--- IE10用 ---*/
    -webkit-flex-wrap:wrap/*--- safari(PC)用 ---*/
    flex-wrap:wrap
}

flex-flowプロパティ(flex仕様)

flex-flowプロパティについての詳しい説明はコチラ
⇒【CSS】Flexboxのプロパティ(flex-direction、flex-wrap、flex-flow、order)を紹介します


flex-directionプロパティとflex-wrapプロパティをまとめて指定できます。
flexbox仕様から追加されたので、Androidの旧ブラウザ(とiOS6.1以前)への対応策はありません。


前項で述べたように、flex-wrapと同じ働きをするプロパティはAndroidの旧ブラウザ(とiOS6.1以前)で対応していません。
flex-directionに関する指定のみ、個別に書いてください。
ここではIE10とSafari用のみ記述します。


仕様 プロパティ
box - -
flexbox flex-flow flex-direction  flex-wrap
flex

参考ソース

.foo {
    display:-ms-flexbox;/*--- IE10 ---*/
    display:-webkit-flex;/*--- safari(PC)用 ---*/
    display:flex;
    -ms-flex-flow:reverse wrap;/*--- IE10用 ---*/
    -webkit-flow:reverse wrap;/*--- safari(PC)用 ---*/
    flex-flow:reverse wrap;
}

orderプロパティ(flex仕様)

orderプロパティについてはコチラ
【CSS】Flexboxのプロパティ(flex-direction、flex-wrap、flex-flow、order)を紹介します


HTMLで記述された順番を無視し、数字で指定された順(昇順)で表示するものです。


仕様 プロパティ
box box-original-group 整数(自然数)初期値:1
flexbox flex-order 実数 初期値:0
flex order 整数 初期値:0

参考ソース

.foo {
    display:-webkit-box;/*--- Android旧ブラウザ用 ---*/
    display:-ms-flexbox;/*--- IE10 ---*/
    display:-webkit-flex;/*--- safari(PC)用 ---*/
    display:flex;
}
.foo_child:first-child {
    -webkit-box-ordinal-group:2;/*--- Android旧ブラウザ用 ---*/
    -ms-flex-order:2;/*--- IE10用 ---*/
    -webkit-order:2;/*--- safari(PC)用 ---*/
    order:2;
}

******
注意点
******
【box】仕様の『box-ordinal-group』は初期値が1であるため、たとえば整列した子要素の中で最後のものを先頭に持っていくためには、全ての子要素の値を「2」にして、最後の子要素を「1」にする必要があります。


※【flexbox】と【flex】では、初期値は「0」です。


flexプロパティ(flex仕様)

flexプロパティについてはコチラ
【CSS】Flexboxのプロパティ(flex-grow、flex-shrink、flex-basis、flex)を紹介します


仕様 プロパティ
box box-flex 実数(負の数は無効)初期値 0.0
box-flex-group 整数 初期値 1
flexbox flex

指定の仕方

flex:実数 実数 ◯;

1番目の実数は負の数無効、初期値 1

2番めの実数は負の数無効、初期値 0

最後の◯はwidthプロパティと同じ指定の仕方(px、%などの単位付き)実数

flex flex

指定の仕方

flex:<flex-grow> <flex-shrink> <flex-basis>;

初期値は各プロパティの初期値

flex-grow 実数 ※負の数は無効、flexプロパティで省略されたときの値 1
flex-shrink 実数 ※負の数は無効、flexプロパティで省略されたときの値 1
flex-basis widthプロパティと同じ値の指定方法 flexプロパティで省略されたときの値 auto

現行の仕様では【flexプロパティ】で、『flexアイテムの伸長係数(伸びる倍率)』、『flexアイテムの縮短係数(縮む倍率)』、『flexアイテムの幅』を一括指定できます。
また、3つの値をそれぞれ、『flex-grow』、『flex-shrink』、『flex-basis』で個別に指定することもできます。


しかし、最も古い【box】仕様では、伸長係数か縮短係数のどちらかしか指定できません。


また、IE10が対応している【flexbox】仕様では、現行の【flex】仕様と同じく3つの値を指定できますが、それぞれ単体のプロパティとして分けて指定することはできません。


参考ソース

.foo {
    display:-webkit-box;/*--- Androidブラウザ用 ---*/
    display:-ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- safari(PC)用 ---*/
    display:flex;
}
.foo_child:first-child {
    -webkit-box-flex:2.0;
    -ms-flex:2 0 auto;
    flex:2 0 auto;
}

解説
flexコンテナの最初の子要素(flexアイテムの最初のもの)に伸長係数『2』を指定し、伸びる分の長さを他のflexアイテムの2倍にしています。


【box】仕様のbox-flexは初期値が『0.0』です。これに倣って、box-flexプロパティの値を『2.0』にしています。
弊社のAndroid実機(バージョン4.2.2)で試した結果、『-webkit-box-flex:2;』という記述でも表示は同じでした。


伸長係数の注意点

複数のflexアイテムに別の伸長係数(伸びる倍率)が指定されていて、余白がある場合の処理です。


伸長係数の説明画像


flexアイテム①に比率1を指定し、flexアイテム②に比率2を指定しています。


伸長分の比率は各flexアイテム全体の長さではなく、上図のように、指定された比率に応じて余白分が分配されます。


同じように、縮短係数(縮む倍率)も、指定された比率によって、縮む分が決められます。
(数の大きい方が縮む分が長くなります)


まとめ

FlexboxはIE9で動かないので、案件によっては使いづらい状況があると思います。


その点、スマホはAndroidの旧バージョン(バージョン4.3以前)への対応ができれば導入可能です。


今回と次回の記事を参考にして、是非使ってみてください。


次回は『Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編】』の残りを紹介します。


最後までお読みいただき、ありがとうございました。



続きはコチラ
Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編2】を紹介します【2015年4月現在】

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事