MENU

flexboxのベンダープレフィックスまとめ

2019 9/02

何度も忘れてはググってを繰り返してしまう、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直書きの時に困りますよね〜。

この記事が気に入ったら
フォローしてね!

目次
閉じる
WordPressテーマ SWELLWordPressテーマ SWELL