カテゴリー

キーワード

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

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


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

css Flexbox ブラウザ対応3

こんにちは、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アイテムを示しています。


justify-contentプロパティ

【justify-content】プロパティはflexアイテムの横方向の位置揃えを指定するものです。


justify-contentについての詳しい説明はコチラ
【CSS】Flexboxのプロパティ(justify-content、align-items、align-self、align-content)を紹介します


仕様 プロパティ
box box-pack start  end  center  justify
flexbox flex-pack start  end  center  justify  distribute
flex justify-content flex-start  flex-end  center  space-between  space-around

参考ソース

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

解説
2~5行目 Flexboxを作るための指定です。
6~9行目 左からflexアイテムを並べて余白があれば、その余白を各Flexアイテムの間に等間隔になるよう配分します。(この場合、何も指定がないので並ぶ方向は左から右)
6行目 Android旧ブラウザ用(box仕様)です。
7行目 IE10用(Flexbox仕様)です。
8行目 Safari、iOSのSafari用(flex仕様ベンダープレフィックス付き)です。
9行目 現行のflex仕様です。


旧仕様が現行のflex仕様のどれに対応するかということを下記に記します。


【flex】仕様の『justify-content:flex-start;』

【box】仕様 ⇒ box-pack:start;
【flexbox】仕様 ⇒ flex-pack:start;


【flex】仕様の『justify-content:flex-end;』

【box】仕様 ⇒ box-pack:end;
【flexbox】仕様 ⇒ flex-pack:end;


【flex】仕様の『justify-content:center;』

【box】仕様 ⇒ box-pack:center;
【flexbox】仕様 ⇒ flex-pack:center;


【flex】仕様の『justify-content:space-between;』

【box】仕様 ⇒ box-pack:justify;
【flexbox】仕様 ⇒ flex-pack:justify;


【flex】仕様の『justify-content:space-around;』

【box】仕様 ⇒ 対応するプロパティがありません。
【flexbox】仕様 ⇒ flex-pack:distribute;


「-webkit-box-pack」プロパティについての注意点

flexコンテナよりflexアイテム(の合計の長さ)が大きい場合、-webkit-box-packの指定を無視して左寄せになります。


align-items、align-selfプロパティ

【align-items】プロパティ、【align-self】プロパティは、flexアイテムの縦方向の整列を指定します。
align-itemsは親要素(flexコンテナ)に指定し、align-selfは子要素(flexアイテム)に指定します。


align-items、align-selfについての詳しい説明はコチラ
【CSS】Flexboxのプロパティ(justify-content、align-items、align-self、align-content)を紹介します


align-items

仕様 プロパティ
box box-align start  end  center  baseline  stretch
flexbox flex-align start  end  center  baseline  stretch
flex align-items flex-start  flex-end  center  baseline  stretch

align-self

仕様 プロパティ
box - -
flexbox flex-item-align auto  start  end  center  baseline  stretch
flex align-self auto  flex-start  flex-end  center  baseline  stretch

参考ソース(align-items)】

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


参考ソース(align-self)】

.foo {
    display:-ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- safari(PC)用 ---*/
    display:flex;
}
.foo_child {
    -ms-flex-flex-item-align:stretch;/*--- IE10 ---*/
    -webkit-align-self:stretch;/*--- safari(PC)用 ---*/
    align-self:stretch;
}

解説
参考ソース2 align-selfプロパティはflexbox仕様から追加されたものなので、iOS 6.1以前のSafariとAndroidの旧ブラウザでは使えません。


align-contentプロパティ

【align-content】プロパティはflexコンテナ内に縦方向の余白があるとき、flexラインをどのように位置揃えするか指定するものです。


これはflexbox仕様から追加されたものなので、iOS 6.1以前のSafariとAndroidの旧ブラウザでは使えません。


align-contentプロパティについての詳しい説明はコチラ
【CSS】Flexboxのプロパティ(justify-content、align-items、align-self、align-content)を紹介します


仕様 プロパティ
box - -
flexbox flex-line-pack start  end  center  justify  distribute  stretch
flex align-content flex-start  flex-end  center  space-between  space-around  stretch

参考ソース

.foo {     display:-ms-flexbox;/*--- IE10 ---*/     display: -webkit-flex;/*--- safari(PC)用 ---*/     display:flex;     -ms-flex-line-pack:stretch;/*--- IE10 ---*/     -webkit-align-content:stretch;/*--- safari(PC)用 ---*/     align-content:stretch; }


flexbox仕様が現行のflex仕様のどれに対応するかということを、値が違うものだけ下記に記します。


【flex】仕様の『align-content:space-between;』

【flexbox】仕様 ⇒ flex-line-pack:justify ;


【flex】仕様の『align-content:space-around;』

【flexbox】仕様 ⇒ flex-line-pack:distribute ;


まとめ

今回まで『Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応』と題して三回に分けて紹介しました。


以前、紹介した現行仕様の『Flexboxの書き方』と併せてお読みいただくと、かなり理解が進むと思います。


近い将来、要素の横並びはFlexboxさえ知っておけば大丈夫という状況になるはずですので、早い段階でマスターして備えたいですね。


次回からは別のCSSプロパティを紹介していきます。

よろしければまたご訪問ください。


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



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


Flexboxの各プロパティについては以下をご覧ください

【CSS】Flexboxのプロパティ(flex-direction、flex-wrap、flex-flow、order)を紹介します


【CSS】Flexboxのプロパティ(flex-grow、flex-shrink、flex-basis、flex)を紹介します


【CSS】Flexboxのプロパティ(justify-content、align-items、align-self、align-content)を紹介します

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

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

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

前職:ライター、小説家

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

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

 


カテゴリー

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