Flexboxはレイアウトの調整で、かなり重宝するCSSですよね。
ただし、モダンブラウザのみの対応で良ければ支障はないのですが、古いバージョンのブラウザには対応していないという課題があります。
とは言え、レイアウトを組むためには、欠かせないため、古いバージョンのブラウザにも対応するためのベンダープレフィックス一覧をコピペで利用できるようにまとめました。
Flexコンテナー（親要素）
まずは、親要素となるFlexコンテナーの各プロパティのベンダープレフィックス一覧です。
display: flex;
1 2 3 | display: -webkit-box;display: -ms-flexbox;display: flex; |
flex-direction
flex-direction: row;
1 2 3 4 | -webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row; |
flex-direction: row-reverse;
1 2 3 4 | -webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse; |
flex-direction:column;
1 2 3 4 | -webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; |
flex-direction: column-reverse;
1 2 3 4 | -webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse; |
flex-wrap
flex-wrap:nowrap;
1 2 | -ms-flex-wrap: nowrap;flex-wrap: nowrap; |
flex-wrap:wrap;
1 2 | -ms-flex-wrap: wrap;flex-wrap: wrap; |
flex-wrap: wrap-reverse;
1 2 | -ms-flex-wrap: wrap-reverse;flex-wrap: wrap-reverse; |
flex-flow: row wrap;
1 2 3 4 | -webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-flow: row wrap;flex-flow: row wrap; |
justify-content
justify-content: flex-start;
1 2 3 | -webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start; |
justify-content:flex-end;
1 2 3 | -webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; |
justify-content: center;
1 2 3 | -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; |
justify-content: space-between;
1 2 3 | -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; |
justify-content: space-around;
1 2 | -ms-flex-pack: distribute;justify-content: space-around; |
align-items
align-items: stretch;
1 2 3 | -webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch; |
align-items: flex-start;
1 2 3 | -webkit-box-align: start;-ms-flex-align: start;align-items: flex-start; |
align-items: flex-end;
1 2 3 | -webkit-box-align: end;-ms-flex-align: end;align-items: flex-end; |
align-items: center;
1 2 3 | -webkit-box-align: center;-ms-flex-align: center;align-items: center; |
align-items: baseline;
1 2 3 | -webkit-box-align: baseline;-ms-flex-align: baseline;align-items: baseline; |
align-content
align-content: stretch;
1 2 | -ms-flex-line-pack: stretch;align-content: stretch; |
align-content: flex-start;
1 2 | -ms-flex-line-pack: start;align-content: flex-start; |
align-content: flex-end;
1 2 | -ms-flex-line-pack: end;align-content: flex-end; |
align-content: center;
1 2 | -ms-flex-line-pack: center;align-content: center; |
align-content: space-between;
1 2 | -ms-flex-line-pack: justify;align-content: space-between; |
align-content: space-around;
1 2 | -ms-flex-line-pack: distribute;align-content: space-around; |
Flexアイテム（子要素）
続いて、子要素となるFlexアイテムの各プロパティのベンダープレフィックス一覧です。
order
1 2 3 | -webkit-box-ordinal-group: 2;-ms-flex-order: 1;order: 1; |
flex-grow
1 2 3 | -webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1; |
flex-shrink
1 2 | -ms-flex-negative: 1;flex-shrink: 1; |
flex-basis
1 2 | -ms-flex-preferred-size: 10%;flex-basis: 10%; |
flex
1 2 3 | -webkit-box-flex: 1;-ms-flex: 1 1 10%;flex: 1 1 10%; |
align-self
align-self: auto;
1 2 | -ms-flex-item-align: auto;align-self: auto; |
align-self: flex-start;
1 2 | -ms-flex-item-align: start;align-self: flex-start; |
align-self: flex-end;
1 2 | -ms-flex-item-align: end;align-self: flex-end; |
align-self: center;
1 2 | -ms-flex-item-align: center;align-self: center; |
align-self: stretch;
1 2 | -ms-flex-item-align: stretch;align-self: stretch; |
align-self: baseline;
1 2 | -ms-flex-item-align: baseline;align-self: baseline; |
まとめ
Flexboxを古いバージョンのブラウザにも対応させるために必要なベンダープレフィックスをまとめました。
便利なFlexboxをどんどん活用していきましょうね。