-
携帯端末の開発、聖杯のレイアウト、柔軟ポーチは、私たちは多くの場合、取得するために使用する場合は、表示W3C長い時間前にあります：ボックスプロパティ
-
フレックスは最新のものですが、実際のブラウザのテストでは、ディスプレイ：-webkit-ボックス：フレックスは、完全に表示を置き換えることはできません
-
表示：ボックスを参照して使用することができます http://www.html5rocks.com/en/tutorials/flexbox/quick/
-
表示：フレックスを参照して使用することができます https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-
互換性の問題を参照することができます https://css-tricks.com/old-flexbox-and-new-flexbox/
-
ボックス文法：AndroidのUCブラウザは表示のみをサポートしています。iOSのUCブラウザは、次の2つの方法をサポートしています
-
なお、ライン・クランプを使用しているときは、ディスプレイを使用する必要がある場合：ボックス
表示：-webkit-ボックス、このプロパティを設定し、親要素、および効果表示：同様に曲がる、行のサブエレメントを表示することができ、および適応。
デモ：
1 < スタイル> 2 * { 3 マージン：0 。 4 パディング：0 。 5 } 6 .parent { 7 幅：400ピクセル。 8 高さ：600PX 。 9 表示：-webkit-ボックス。 10 -webkit-ボックスオリエント：縦。/ * 竖向排列* / 11 } 12はされ .childワン{ 13は 背景：水色; 14 -webkit-フレックスボックス：1 ; 15 } 16 .child-TWO { 17。 背景：LightGrayの、 18である -webkit-フレックスボックス：2 ; 19 } 20であります .child-三{ 21は、 背景：ライトグリーン、 22である / * 一定の高さとマージンを追加* / 23であり、 高さ：200pxの; 24 マージン：15ピクセル0 ; 25 } 26 </ スタイル> 27 28 < divのスタイル= "表示：-webkit-ボックス; -webkitボックスパック：センター;ボーダー：1ピクセル固体＃000" > 29 < DIV クラス= "親" > 30 < DIV クラス= "子-1" > 1 </ divの> 31 < divのクラス= "子-2" > 2 </ DIV > < divのクラス= "子-3" > 3 </ divの> 33 </ divの> 34 </ DIV >
結果は以下の通りであります：
-webkit-ボックスと、表示：だからここに誰かが、ディスプレイを言うだろう違いは何であるフレックス？
あなたは違い、ディスプレイと言う場合は、次のボックスを、古い規範は、それを追加するために、アカウントにアンティーク織機を取ります。
フレキシボックスフレックスは新しい規範である、古いマシンがサポートされていません。
1.次のプロパティは、によって2つのプロパティの間に制御します。
| 表示：ボックス。 | 表示：フレックス | 説明 |
| ボックス・オリエント：横| 縦| 受け継ぎます | フレックス方向：行| カラム | この属性はサブ要素の親要素が配置される方法を定義します。 |
| 箱-方向：ノーマル| 逆 | フレックス方向：行反転| 行逆 | その子要素の順序を変化させる作用 |
| 箱パック：スタート| 終わり| センター| 正当化 | 正当化コンテンツを：フレックススタート| フレックス・エンド| センター| スペースの間に|スペースの周りに | この属性は、親要素のサブ要素が水平に配置されている定義します |
| 箱-ALIGN：スタート| 終わり| センター| ベースライン| ストレッチ | ALIGN-アイテム：フレックススタート| フレックス・エンド| センター| ベースライン| ストレッチ | この属性は、親要素が垂直に配置されたサブ要素を定義します |
| ボックスフレックス：<番号> | フレックス：フレックス縮小し、フレックスベーシス速記、フレックス成長されます | プロパティサブLET容器は、親コンテナの幅のための一定のルールに従って分割されます |
| ボックス序グループ：必要な接頭辞を使用して | オーダー：<番号> | 下位の順序は、小さな値は、より前方に配置されています |
| 箱ライン：排除されています | フレックスラップ：NOWRAP | ラップ| ラップ逆 | コンテナ内のサブラッピング結果 |
ここではフレックスプロパティの多くは書かれていないがある、それは私の他のブログ記事を参照することができます詳細な紹介構文の詳細なプロパティを
ヒント：ボックス属性は、基本的には、公式の使用ブラウザの前に別のプレフィックスを追加する必要があります
2.display：互換性の分析ボックスのレイアウトブラウザ：フレックスと表示
参照は指定できますhttps://www.cnblogs.com/walk-on-the-way/p/5997073.html
一般的には、IEブラウザの言葉、使用を終了することができた上でPC、一般的な使用の表示は考慮されません：フレックス;アンドリュースUCモバイル端末は、表示のみをサポートしています。ボックス、iOS版のUCdisplay：ボックスとディスプレイ：両方のサポートを曲げます。
実際の試験での表示：フレックスことはできません完全に代替表示：ボックス。表示：フレックスブラウザの互換性があまりにも面倒です。
ブラウザの互換性の書き込み：
1 .container { 2 ディスプレイ：-webkitボックス。/ * クローム4+、サファリ3.1、SafariのiOSの3.2以上* / 3 表示：-mozボックス。/ * Firefoxの17〜* / 4 表示：-webkit-フレックス。/ * クローム21+、サファリ6.1以降、iOSのSafariの7+、オペラ15/16 * / 5 表示：-moz-フレックス ; / * Firefoxの18+ * / 6 ディスプレイ：-MS-フレキシボックス。/ * IE 10 * / 7 表示：フレックス。/ * クロム29+は、Firefox 22+、IE 11+、オペラ12.1 / 17から/ 18アンドロイド4.4以降* / 8 }