何度も忘れてはググってを繰り返してしまう、flexboxのベンダープレフィックスをまとめておきます。
普段はGulpなどのタスクランナーでAutoprefixerを導入したりしている人も多いと思うんですが、ふとした時に素のCSSでflexboxを書かないといけない時ありますよね。
そんな時にすぐに確認できるように、ざっと一覧でメモしていきます。
Autoprefixer の設定：["> 1% in JP", "last 2 versions", "ie >= 11", "ios_saf >= 8", "Android >= 4.4"]
.flex_box{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-webkit-flex-direction:row;
-ms-flex-direction:row;
flex-direction:row;
-webkit-box-orient:horizontal;
-webkit-box-direction:reverse;
-webkit-flex-direction:row-reverse;
-ms-flex-direction:row-reverse;
flex-direction:row-reverse;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
-webkit-flex-direction:column-reverse;
-ms-flex-direction:column-reverse;
flex-direction:column-reverse;
-webkit-flex-flow:row-reverse wrap;
-ms-flex-flow:row-reverse wrap;
flex-flow:row-reverse wrap;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
-webkit-box-pack:start;
-webkit-justify-content:flex-start;
-ms-flex-pack:start;
justify-content:flex-start;
-webkit-box-pack:end;
-webkit-justify-content:flex-end;
-ms-flex-pack:end;
justify-content:flex-end;
-webkit-justify-content:space-around;
-ms-flex-pack:distribute;
justify-content:space-around;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-align:start;
-webkit-align-items:flex-start;
-ms-flex-align:start;
align-items:flex-start;
-webkit-box-align:end;
-webkit-align-items:flex-end;
-ms-flex-align:end;
align-items:flex-end;
-webkit-box-align:baseline;
-webkit-align-items:baseline;
-ms-flex-align:baseline;
align-items:baseline;
-webkit-align-content:center;
-ms-flex-line-pack:center;
align-content:center;
-webkit-align-content:flex-start;
-ms-flex-line-pack:start;
align-content:flex-start;
-webkit-align-content:flex-end;
-ms-flex-line-pack:end;
align-content:flex-end;
-webkit-align-content:stretch;
-ms-flex-line-pack:stretch;
align-content:stretch
}
.flex_item{
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
-webkit-box-ordinal-group:2;
-webkit-order:1;
-ms-flex-order:1;
order:1;
-webkit-flex-grow:1;
-ms-flex-positive:1;
flex-grow:1;
-webkit-flex-shrink:1;
-ms-flex-negative:1;
flex-shrink:1;
-webkit-flex-basis:10%;
-ms-flex-preferred-size:10%;
flex-basis:10%;
-webkit-align-self:auto;
-ms-flex-item-align:auto;
align-self:auto;
-webkit-align-self:flex-start;
-ms-flex-item-align:start;
align-self:flex-start;
-webkit-align-self:center;
-ms-flex-item-align:center;
align-self:center;
-webkit-align-self:baseline;
-ms-flex-item-align:baseline;
align-self:baseline;
-webkit-align-self:stretch;
-ms-flex-item-align:stretch;
align-self:stretch
}
safariの8を考慮しないのであれば -webkit-box-ではない普通の方の-webkit-〇〇は不要。ただ、なぜか日本ではまだ1%以上のシェアがあるようです。（2019年3月現在）
普段gulpなどで自動付与しているとたまにCSS直書きの時に困りますよね〜。
コメント