【コピペOK】Flexboxに必要なベンダープレフィックス一覧！

Flexboxはレイアウトの調整で、かなり重宝するCSSですよね。

ただし、モダンブラウザのみの対応で良ければ支障はないのですが、古いバージョンのブラウザには対応していないという課題があります。

とは言え、レイアウトを組むためには、欠かせないため、古いバージョンのブラウザにも対応するためのベンダープレフィックス一覧をコピペで利用できるようにまとめました。

Flexコンテナー（親要素）

まずは、親要素となるFlexコンテナーの各プロパティのベンダープレフィックス一覧です。

display: flex;

display: -webkit-box;
display: -ms-flexbox;
display: flex;

flex-direction

flex-direction: row;

-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;

flex-direction: row-reverse;

-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;

flex-direction:column;

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

flex-direction: column-reverse;

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

flex-wrap

flex-wrap:nowrap;

-ms-flex-wrap: nowrap;
flex-wrap: nowrap;

flex-wrap:wrap;

-ms-flex-wrap: wrap;
flex-wrap: wrap;

flex-wrap: wrap-reverse;

-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;

flex-flow: row wrap;

-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;

justify-content

justify-content: flex-start;

-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;

justify-content:flex-end;

-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;

justify-content: center;

-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;

justify-content: space-between;

-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;

justify-content: space-around;

-ms-flex-pack: distribute;
justify-content: space-around;

align-items

align-items: stretch;

-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;

align-items: flex-start;

-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;

align-items: flex-end;

-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;

align-items: center;

-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;

align-items: baseline;

-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;

align-content

align-content: stretch;

-ms-flex-line-pack: stretch;
align-content: stretch;

align-content: flex-start;

-ms-flex-line-pack: start;
align-content: flex-start;

align-content: flex-end;

-ms-flex-line-pack: end;
align-content: flex-end;

align-content: center;

-ms-flex-line-pack: center;
align-content: center;

align-content: space-between;

-ms-flex-line-pack: justify;
align-content: space-between;

align-content: space-around;

-ms-flex-line-pack: distribute;
align-content: space-around;

Flexアイテム（子要素）

続いて、子要素となるFlexアイテムの各プロパティのベンダープレフィックス一覧です。

order

-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;

flex-grow

-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;

flex-shrink

-ms-flex-negative: 1;
flex-shrink: 1;

flex-basis

-ms-flex-preferred-size: 10%;
flex-basis: 10%;

flex

-webkit-box-flex: 1;
-ms-flex: 1 1 10%;
flex: 1 1 10%;

align-self

align-self: auto;

-ms-flex-item-align: auto;
align-self: auto;

align-self: flex-start;

-ms-flex-item-align: start;
align-self: flex-start;

align-self: flex-end;

-ms-flex-item-align: end;
align-self: flex-end;

align-self: center;

-ms-flex-item-align: center;
align-self: center;

align-self: stretch;

-ms-flex-item-align: stretch;
align-self: stretch;

align-self: baseline;

-ms-flex-item-align: baseline;
align-self: baseline;

まとめ

Flexboxを古いバージョンのブラウザにも対応させるために必要なベンダープレフィックスをまとめました。

便利なFlexboxをどんどん活用していきましょうね。