読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

2015年10月度のflexboxの書き方

1年ぶりに業務でコーディング・・・が、早速つまずく。

「display:flexは、仕様やら、OSやら、端末やら、いろんなものがコロコロ変わったみたいだけど、今はどう指定すれば良いの?」

ってことで、flexboxの書き方を調べました。

ブラウザのサポート状況などから

まずは、先にやってくれてる人がいないかネット検索。比較的新しめの記事がこちらでした。

コリスでは各プロパティを図で詳しく説明してくれています。

OSやブラウザのサポート状況ですが、
最新バージョンであれば、どのブラウザもプレフィックスなしで使えるようです(やっとか・・・)。

上記のサポート状況など踏まえ、

  • スマートフォンiOSAndroid)に限定
  • 単に要素を横並びにしたい
  • 少し古め(シェア1%以上)のブラウザバージョンもサポートしたい

という条件で作ったCSSがこちら。

flexboxコンテナとなる要素に対して。

display: -webkit-box;/* Android4.3以前ブラウザ用 */
display: -webkit-flex;/* iOS8以前Safari用 */
display: flex;

flexboxアイテムとなる要素に対して。

 -webkit-box-flex: 1;/*--- Android4.3以前ブラウザ用 ---*/
 -webkit-flex: 1;/*--- iOS8以前Safari用 ---*/
 flex: 1;

これで、理論上は、シェアが1%以上ある各OSバージョンの標準ブラウザで、flexboxアイテムが横に並ぶはずです。

実際にスマホで見てみた

しかしここで、「display: -webkit-flex;」はいらない説が出てきました。
マジかと思って、既存のテンプレートで試してみたら、確かになくても大丈夫でした。

が、いろいろ調べた結果、flexboxアイテム要素内の文字数が少ない場合は、「display: -webkit-flex;」はなくても大丈夫、ということがわかりました。
調べた方法ですが、下記のデモページを、各種OSを搭載したスマホ実機で見てみました。

デモページ(display:-webkit-flex;や-webkit-box-flex:1;のあるなしなど4パターン)
Document

検証OS(iOSは標準搭載のSafariAndroidChromeで検証)

  • iOS7
  • iOS8
  • iOS9
  • Android2.3
  • Android4
  • Android5

検証でわかったこと。

  • iOS8以前で、flexboxアイテムに「-webkit-flex:1;」を効かせるにはflexboxコンテナに「display: -webkit-flex;」が必要
  • ただし、「display: -webkit-box;」と「display: -webkit-flex;」両方書くと同時に効いてしまうので、「display: -webkit-flex;」を下に書く
  • Android4以前で、flexboxアイテムに「flex:1;」を効かせるには「-webkit-box-flex:1;」が必要

要するに、上のデモページでいうと、パターン4が正解、というわけです。

ちなみに、Xcodeエミュレーターでも各種OSの表示を再現できるので、試しにiOS8でデモページを見てみました。

パターン4

f:id:designnote:20151031113733p:plain
iOS8では問題なし(Android2.3でも問題なし)。

パターン2

f:id:designnote:20151031115312p:plain
「display: -webkit-flex;」より下に「display: -webkit-box;」を書いているので、「display: -webkit-flex;」が効いていない。結果、flexboxアイテムに「-webkit-flex:1;」が効かないので、文字数が多いと、端末の横幅をはみ出してしまう。

まとめ

いろいろ調査しましたが、最初のコードで問題ないってことです。
flexboxには、他にもflexboxアイテムの中央寄せや縦位置調整などのプロパティがあるので、それらもあわせるとこんな感じになります。

flexboxコンテナ

display: -webkit-box;/* Android4.3以前ブラウザ用 */
display: -webkit-flex;/* iOS8以前Safari用 */
display: flex;
-webkit-box-align: center;/* Android4.3以前ブラウザ用 */
-webkit-align-items: center;/* iOS8以前Safari用 */
align-items: center;
-webkit-box-pack: center;/* Android4.3以前ブラウザ用 */
-webkit-justify-content: center;/* iOS8以前Safari用 */
justify-content: center;

flexboxアイテム

 -webkit-box-flex: 1;/*--- Android4.3以前ブラウザ用 ---*/
 -webkit-flex: 1;/*--- iOS8以前Safari用 ---*/
 flex: 1;

ポイントは、「-webkit-」がつくプロパティは、より古い方を上に書く、ことです。
まぁ、半年後くらいには、「-webkit-」は全部不要になるかもしれませんが^ ^;

あくまで、2015年10月現在のflexboxの書き方でした。