フレックスレイアウトの互換性の問題の概要

/* 子要素 - 均等に分割された列 */
.flex1 {
  -webkit-box-flex: 1; /* 古い - iOS 6-、Safari 3.1-6 */
  -moz-box-flex: 1; /* 古い - Firefox 19- */
  width: 20%; /* 古い構文の場合、それ以外の場合は折りたたまれます。 */
  -webkit-flex: 1; /* クローム */
  -ms-flex: 1; /* IE 10 */
  flex: 1; /* 新機能、仕様 - Opera 12.1、Firefox 20+ */
}
/* 親要素 - 水平配置（主軸） */
.flex-h {
  display: box; /* 古い - Android 4.4- */
  display: -webkit-box; /* 古い - iOS 6-、Safari 3.1-6 */
  display: -moz-box; /* 古い - Firefox 19- (バグがあるが、ほぼ動作する) */
  display: -ms-flexbox; /* トゥイーナー - IE 10 */
  display: -webkit-flex; /* 新機能 - Chrome */
  display: flex; /* 新機能、仕様 - Opera 12.1、Firefox 20+ */
  /* バージョン 09 */
  -webkit-box-orient: 水平;
  /* バージョン 12 */
  -webkit-flex-direction: 行;
  -moz-flex-direction: 行;
  -ms-flex-direction: 行;
  -o-flex-direction: 行;
  flex-direction: 行;
}
/* 親要素 - 水平改行 */
.flex-hw{
  /* バージョン 09 */
  /*-webkit-box-lines: 複数;*/
  /* バージョン 12 */
  -webkit-flex-wrap: ラップ;
  -moz-flex-wrap: ラップ;
  -ms-flex-wrap: ラップ;
  -o-flex-wrap: ラップ;
  flex-wrap: ラップ;
}
/* 親要素 - 水平方向の中心（主軸が水平の場合にのみ機能します）*/
.flex-hc {
  /* バージョン 09 */
  -webkit-box-pack: 中央;
  /* バージョン 12 */
  中央揃え
  中央揃え
  コンテンツを中央揃えにします。
  -o-justify-content: 中央;
  コンテンツの中央揃え: 中央;
  /* その他の値は以下の通りです:
    align-items 主軸の原点方向を揃えます flex-end 主軸の延長方向を揃えます space-between 先頭と末尾に空白を残さずに等間隔で配置します space-around 先頭と末尾に空白を残して等間隔で配置します*/
}
/* 親要素 - 垂直配置（主軸） */
.flex-v {
  display: box; /* 古い - Android 4.4- */
  display: -webkit-box; /* 古い - iOS 6-、Safari 3.1-6 */
  display: -moz-box; /* 古い - Firefox 19- (バグがあるが、ほぼ動作する) */
  display: -ms-flexbox; /* トゥイーナー - IE 10 */
  display: -webkit-flex; /* 新機能 - Chrome */
  display: flex; /* 新機能、仕様 - Opera 12.1、Firefox 20+ */
  /* バージョン 09 */
  -webkit-box-orient: 垂直;
  /* バージョン 12 */
  -webkit-flex-direction: 列;
  -moz-flex-direction: 列;
  -ms-flex-direction: 列;
  -o-flex-direction: 列;
  flex-direction: 列;
}
/* 親要素 - 垂直改行 */
.flex-vw{
  /* バージョン 09 */
  /*-webkit-box-lines: 複数;*/
  /* バージョン 12 */
  -webkit-flex-wrap: ラップ;
  -moz-flex-wrap: ラップ;
  -ms-flex-wrap: ラップ;
  -o-flex-wrap: ラップ;
  flex-wrap: ラップ;
}
/* 親要素 - 垂直方向の中心（主軸が水平の場合にのみ機能します）*/
.flex-vc {
  /* バージョン 09 */
  -webkit-box-align: 中央;
  /* バージョン 12 */
  -webkit-align-items: 中央;
  -moz-align-items: 中央;
  -ms-align-items: 中央;
  -o-align-items: 中央;
  アイテムの位置を中央揃えにします。
}
/* 子要素 - 左から右（上から下）の最初の位置に表示されます。ソース ドキュメントの表示順序を変更するために使用されます。*/
.flex-1 {
  -webkit-box-ordinal-group: 1; /* 古い - iOS 6-、Safari 3.1-6 */
  -moz-box-ordinal-group: 1; /* 古い - Firefox 19- */
  -ms-flex-order: 1; /* トゥイナー - IE 10 */
  -webkit-order: 1; /* 新機能 - Chrome */
  order: 1; /* 新規、仕様 - Opera 12.1、Firefox 20+ */
}
/* 子要素 - 左から右（上から下）の 2 番目の位置に表示されます。ソース ドキュメントの表示順序を変更するために使用されます。*/
.flex-2 {
  -webkit-box-ordinal-group: 2; /* 古い - iOS 6-、Safari 3.1-6 */
  -moz-box-ordinal-group: 2; /* 古い - Firefox 19- */
  -ms-flex-order: 2; /* トゥイナー - IE 10 */
  -webkit-order: 2; /* 新機能 - Chrome */
  order: 2; /* NEW、仕様 - Opera 12.1、Firefox 20+ */
}

/* 親要素 - フレックスコンテナ */
.flex {
  display: box; /* 古い - Android 4.4- */
  display: -webkit-box; /* 古い - iOS 6-、Safari 3.1-6 */
  display: -moz-box; /* 古い - Firefox 19- (バグがあるが、ほぼ動作する) */
  display: -ms-flexbox; /* トゥイーナー - IE 10 */
  display: -webkit-flex; /* 新機能 - Chrome */
  display: flex; /* 新機能、仕様 - Opera 12.1、Firefox 20+ */
}