Flexbox仕様別の書きかたメモ

code_html_640

Flexboxを使用するにあたり、ブラウザやバージョンによってベンダープレフィックスつけたりつけなかったり、プロパティ名が違ったり…
使用する際に頭がごちゃごちゃになったのでよく使うものを表にしてまとめておこうかと。

対応ブラウザ

Flexbox対応ブラウザを調べる際は、定番 Can I use で。

flexbox対応ブラウザ
※2016年01月現在

で、対応早見表

デフォルト Safari用 IE10用 Android 標準ブラウザ用
display: flex display: -webkit-flex display: -ms-flexbox display: -webkit-box
flex-direction: row -webkit-flex-direction: row -ms-flex-direction: row -webkit-box-orient: horizontal

-webkit-box-direction: normal

flex-direction: column -webkit-flex-direction: column -ms-flex-direction: column -webkit-box-orient: vertical

-webkit-box-direction: normal

justify-content: center -webkit-justify-content: center -ms-flex-pack: center -webkit-box-pack: center
justify-content: flex-start -webkit-justify-content: flex-start -ms-flex-pack: start -webkit-box-pack: start
justify-content: space-around -webkit-justify-content: space-around -ms-flex-pack: justify -webkit-box-pack: justify
justify-content: space-between -webkit-justify-content: space-between -ms-flex-pack: justify -webkit-box-pack: justify
align-items: center -webkit-align-items: center -ms-flex-align: center -webkit-box-align: center

下記サイトにて詳しい説明がされています。

参照: RSS flexboxの旧仕様、改定仕様、現行仕様の一覧 – LINE Engineers’ Blog

Sassの@mixin

私はコーディングの際、Sassを使用しているので結局これらのMixinを書きました。

ひとつひとつ書いていくとか想像したくないですね。恐怖。