知識源ます。https：//blog.csdn.net/cddcj/article/details/52131089
弾性レイアウトフレックスは非常に便利なレイアウト機能を持っていますが、ブラウザの一部はフレックスに非常に友好的ではありません
1.フレックスレイアウトを指定します
{
：; Flexの表示を実行します
/ *互換* AppleのブラウザのSafari /：; -webkit-Flexの実行表示を
}
行内元素
{
表示：インラインフレックス
}
注：一連のFlexレイアウト後、サブエレメントフロート、クリア、および垂直align属性は失敗します。
2.コンテナのプロパティ
2.1、フレックス方向：アイテムの配列方向（水平または垂直）
それに設定することができる： - 「行レベル、左
- 」行逆レベル、右
- 「欄垂直方向
- 」欄逆垂直下縁を
2.2、フレックスラップ：変化なしラインの決定、ラインのデフォルト
次のように設定することができます - 「ラップではないNOWRAP
- 「ラップラップ
- 」ラップ逆改行、下記の最初の行
2.3、フレックスフロー：ラップの方向
フレックス方向とフレックスラップ速記で、デフォルトの行のNOWRAP
2.4、正当化コンテンツを内部アライメント要素
「正当化コンテンツを：フレックススタート左揃え - ：に設定することができます
- 「フレックス・エンドは、右の正当化
- 「中央センター
- 「端整列空間との間の接着、均等プロジェクトとの離間
- 各プロジェクト二十から二ための「宇宙の周りの位相間隔
2.5、ALIGN-項目がプロジェクトを十字軸に整列されている方法を定義
- 「ALIGN-項目：フレックススタート
- クロス軸と整列「フレックス終了起点
- 「センター端クロス軸が整列している（中心）
- 「中点アラインメントを交差基準軸
- 「テキストのベースラインのアライメントのストレッチプロジェクトの最初の行
デフォルト：設定または自動ではないが、コンテナの高さ全体を占めています。
2.6つのみの軸、プロパティが動作しない場合、ALIGN-コンテンツ軸は、多くの配向を規定します。
- 「ALIGN-コンテンツを：開始点と十字軸と整列フレックススタート
- 「フレックス・エンド
- "センター
- 「スペース間
- 「宇宙アラウンド
- "ストレッチ。
デフォルト：軸が全体の交差軸を占めています。
2.7ボックス配向ボックスが水平方向または垂直方向に配置されたサブ要素であるかどうかを指定します。- 「水平：水平方向（デフォルト）- 」垂直：縦- 「：インライン軸インライン軸（マップに対して横方向）に沿って部分要素- 」（マッピングさに垂直な）座標軸に沿ってサブ要素ブロック：ブロック軸
================================================== ================次はのコピーです。。
4.プロジェクトのプロパティ
。オーダー：項目の順序
。フレックス
。拡大をフレックス育ちます
。フレックスシュリンク減速比を
。フレックス基礎スピンドルスペース
。ALIGN-自己が他の項目との単一の項目を可能にする配向と同じではない持って
プロジェクトを定義する4.1ために順序を
- 「順序：<整数>;
小さな値、より前方に配置、デフォルトは0です。
4.2フレックス成長
- 「フレックス成長：<番号>。/ *デフォルト0 * /
拡大していない空き領域がある場合は、プロジェクトの拡大は、デフォルトでは、すなわち、0です。
フレックス成長特性は、残りのスペースのアリコート1であり、
フレックス成長属性が2で、他にはかつての2倍の数の他の項目によって占め、残りのスペース、1です。
4.3フレックスシュリンク
- 「フレックスシュリンク：<番号>。/ *デフォルト1 * /
縮尺プロジェクト、デフォルトは1である、すなわち、空間的なレイアウト、プロジェクトが削減されます。
フレックスシュリンク属性が縮小、1である;
プロジェクトフレックスシュリンクプロパティが0であれば、他のは、スペースの不足、ではないがゼロに縮小したときに、1です。
プロパティの無効な負の値。
4.4フレックス基礎
- 「フレックス根拠：<長さ> | 自動; / *デフォルトの自動* /
余分なスペースを割り当てる前に、このプロジェクトは、宇宙にスピンドルの大きさを占めています。デフォルトでは、プロジェクトの元のサイズということ、autoです。
0％は、ゼロサイズを省略する。
4.5フレックス
- "フレックス：なし| [<「フレックスシュリンク」> <「フレックス成長」>？|| <「フレックス基礎」>]
Flexプロパティはフレックスに成長している、フレックスシュリンク、フレックスベースの略、デフォルト0 1オート。
2つのオプションの属性の後。
オート（1 1オート）およびなし（0 0オート）：このプロパティは、2つの迅速な値を持っています。
ブラウザは、相関値を計算しますので、別々の3つの別々のプロパティを記述するのではなく、このプロパティの優先使用をお勧めします。
詳細：前記<フレックス基礎>は省略し、デフォルト％0にされた
<フレックス基礎>は幅、コンテンツに応じた長さを定義されていない場合は、その<幅>、に応じて、自動を指定します。
フレックス：フレックス1 == :. 1 1 0％;
フレックス：フレックス==なし：0自動;
フレックス：オートフレックス== :. 1. 1自動。
例如：の<div>
<p個のID = "P1">こんにちは</ P>
<P>こんにちは</ P>
</ div>
{幅DIV：300ピクセルによって、ディスプレイ：フレックス;}
DIV＃1 P1 {フレックス：1;}
[フレックス：1、すなわち、残りの自動残りの幅が屈曲され、DIVは、可撓性長さを備えていることを意味する：1この]
4.6 ALIGN-セルフ
- 「整列自己：オート|フレックス開始|フレックス端|中央|ベースライン|ストレッチ、
他の項目との単一アイテムが異なる配向を有することができ、ALIGN-itemsプロパティをカバーすることができます。
第二に、互換性
/ *親要素-横方向（スピンドル）に配置* /
表示：ボックス（伸縮ボックスの最も古いバージョン）
表示：-webkit-ボックス; / * IOSの6-、サファリ3.1-6 * /
表示：-webkitフレックス; /クローム* * /
表示：-moz-ボックス; / Firefoxの* 19 * /
表示：フレックスボックスの-ms-;
表示：フレックス; / * Flexコンテナ* /
/ *方向* /
-webkit-Flexの方向：行;
-moz方向- FLEX：行;
-msフレックス方向：行;
-O-フレックス方向：行;
フレックス方向：行;文法の【新規】バージョン
- / *親要素水平方向の中央には、* / [新]文法のバージョン（横方向の主軸を有効にするにはある）
;センター：-webkit-ザ・正当化-コンテンツを
;：-moz-ザ・正当化し、コンテンツセンター
;センター：-ms-ザ・正当化-コンテンツを
-oコンテンツ-正当化：センター;
正当化-コンテンツを：センター;
/ *子要素- （垂直軸上のシャフト側の）垂直中央* / [新しいバージョン文法
-webkit-ALIGN =左アイテム：センター;
-moz-ALIGN =左の項目：;センター
=左アイテムアライン-ms：センター。
=左のアイテムを揃える- O：センター;
=左アイテム整列：センター。
/ *父元素-横向换行* /
-webkit-フレックスラップ：ラップ;
-moz-フレックスラップ：ラップ;
-ms-フレックスラップ：ラップ;
-o-フレックスラップ：ラップ;
フレックスラップ：ラップ;
/ *子元素-平分比例* /
-prefixボックスフレックス：1; / *古いスペックのWebKit、MOZ * /
-webkit-ボックスフレックス：1; / * OLD - IOSの6-、サファリ3.1-6 * /
-webkitフレックス：1。/ *クローム* /
-moz-ボックスフレックス：1; / * Firefoxの19インチ* /
-ms-フレックス：1; / * IE 10 * /
幅：20％。
フレックス：1; / * NEW、オペラ12.1は、Firefox 20+ * /
フレックス：2;
デフォルト値はフレックスストレッチを書き込めませんすることはできません。
/ *子要素-ソースドキュメント* /の表示順序変更するための
-prefix-ボックス・グループORDINAL :. 1; / *古いスペック、正でなければなりません* /
-webkit-ボックス・グループ-ORDINAL：2;
-moz-ボックスグループ-序：2;
-ms-フレックス受注：2;
-webkit-受注：2;
注文：2;
注文:. 3。
構文[古い]
/ *中央* /
ボックスパック：センター; //水平
ボックス整列：センター; //垂直
-webkit-ボックスパック：センター;
-webkit-ボックスアライン=左：センター;
-moz-ボックス-pack：センター;
-moz-Boxの-ALIGNは=左：センター;
-ms-フレックスパック：センター;
-ms-フレックスALIGN =左：センター;
/*子元素方向 */
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
-o-box-orient:horizontal;
box-orient:horizontal;