【フロントエンド】css flexのブラウザ互換性の問題

最近開発時にフロントエンドにiphone 6のレイアウトが壊れているページがあることに気づきました.flexレイアウトが互換性がないことがわかりました.
インターネットで関連資料を検索して、cssのflexがバージョンの更新を経験したことを発見して、私達は今技術者がflexのレイアウトを書いて、すべてdisplay:flexです;このように書かれているのは、確かに間違いありません.これは現在の標準バージョンです.しかし、display:boxという古いバージョンもあります.また、display:flex box、互換性に問題が発生しました.
Android
2.3から古いバージョンのdisplay:-webkit-boxをサポートする.4.4標準バージョンdisplay:flexのサポートを開始する.
IOS
6.1古いバージョンのdisplay:-webkit-boxのサポートを開始します.7.1標準バージョンdisplay:flexのサポートを開始します.
PC
ie 10はサポートを開始するが、IE 10は−ms形式である.
これを見て、display:flex;ios 7.1バージョンまでは壊れてしまいます.

解決策：

下の互換性に従って、古いバージョンの書き方を下に置いて、それでは:

.box {
    display:-webkit-flex;
    display:flex;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
}

.flex1 {            
    -webkit-flex: 1;        
    -ms-flex: 1             
    flex: 1;                
    -webkit-box-flex: 1     
    -moz-box-flex: 1;       
}

注意:レイアウト内の各flex 1はwidthを与えることを覚えておいてください.例えば、flex 1が2つあり、boxの半分を占めたいならwidth:50%です.3つあれば、1つが50%、2つが25%と考えてもいいです.