フレックスレイアウト
出典： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
Flexコンテナ（フレックスコンテナ）と呼ばれるフレックスレイアウト要素を使用して、と呼ばれる「コンテナ」。それは、すべての子要素が自動的にFlexプロジェクト（フレックス項目）と呼ばれる、コンテナのメンバーになるのです、と呼ばれる「プロジェクト。」
水平スピンドル（主軸）、縦軸が（クロス軸）と交差：デフォルトコンテナは二つの軸が存在します。交差軸位置がクロススタートと呼ばれる起動、終了位置がクロス端と呼ばれ、スピンドル（境界との交点）の開始位置を終了位置は、メイン端と呼ばれ、主スタートと呼ばれています。
スピンドルの配置に沿ってデフォルトのプロジェクト。スピンドルメインサイズの占有スペースと呼ばれる単一のプロジェクト、クロス軸が占めるスペースは、クロスサイズと呼ばれます。
コンテナのプロパティ
-
フレックス方向決定主軸方向
行（デフォルト値）：主軸が水平である、左端の起点。
行逆スピンドル水平方向、右端の出発点。
カラム：メイン垂直方向エッジ上の出発点。
カラムリバース：垂直方向のスピンドル、低い出発点に沿っ。 -
フレックスラップ軸は、行の高定義されている場合は、ラップする方法
NOWRAP（デフォルト）：ラップしないでください。
ラップ：ラップ、最初の行の上に。
ラップリバース：ラップ、最初の行の下に。
-
フレックスフローは、フレックス方向性とフレックスラッププロパティ、デフォルト値の行NOWRAPの省略形であります
フレックスフロー：|| ;
-
スピンドルのアライメントを定義して正当化する、コンテンツ項目
フレックススタート（デフォルト）：左
フレックスエンド：右アライメント
センター：中央
空間との間：正当性を、アイテム間の間隔は等しいです。
空間アラウンド：各項目の両側に等間隔。したがって、二回プロジェクトのプロジェクトの大きさと境界の間隔との間のギャップ。
-
ALIGN-項目がプロジェクトを十字軸に整列されている方法を定義
フレックススタート：交差軸位置合わせの開始点。
フレックスエンド：端クロス軸アラインメント。
中央：交差軸位置合わせの中点。
ベースライン：プロジェクトベースラインのアライメントのテキストの最初の行。
ストレッチ（デフォルト）：プロジェクトの高さを設定または自動に設定されていない場合は、コンテナの高さ全体を占めています。 -
ALIGN-コンテンツは、軸配向の複数を定義します。プロジェクトは唯一つの軸である場合は、プロパティが動作しません。
フレックススタート：出発点は、クロスシャフトと整列しています。
フレックスエンド：端はクロスシャフトと整列しています。
中心部：中間点に位置合わせ十字軸。
スペース間：交差軸位置合わせ、分布の軸間の平均間隔の両端。
空間アラウンド：各軸の両側に間隔が等しいです。そのため、軸間の間隔の境界軸間隔の2倍の大きさ。
ストレッチ（デフォルト）：軸が全体交差軸を占めます。
プロジェクトのプロパティ
-
プロジェクトを定義するために注文します。整数、負であることができる、より小さな値は、より前方に配置は、デフォルト値は0です。
-
空き領域がある場合は、フレックス成長拡大定義されたプロジェクト、デフォルトは0ですが、つまり、拡大しません。
すべての項目のフレックス成長の属性が1の場合は（もしあれば）、彼らは残りのスペースをアリコートします。プロジェクトが2である場合、このプロパティにフレックス成長し、他のプロジェクトは、その後、残りのスペースを2倍以上に他の項目よりも、元によって占有され、1です。。
-
フレックスシュリンクは、容量が不足している場合には、プロジェクトが低減されている、デフォルトは1で、縮尺のプロジェクトを定義します。
場合はスペースの不足が、縮小されます場合は、すべてのアイテムが1ある属性フレックス縮小。フレックスシュリンクプロジェクトがゼロの場合の特性を、他のプロジェクトは、スペースの不足、前者は収縮しない場合は、1です。
-
プロジェクト（メインサイズ）によって占められ、余分なスペースを割り当てる前に、フレックス基礎定義されたスピンドルスペース、。余分なスペースがあれば、ブラウザは、このプロパティに基づいて、スピンドルを計算します。デフォルトでは、プロジェクトの元のサイズということ、autoです。
それは、（例えば350pxなど）と同じ幅または高さの属性値を設定することができ、プロジェクトは一定のスペースを占有します
-
フレックスは、-成長フレックスフレックス縮小し、フレックスベーシス速記で、デフォルト値0 1オート
オート（1 1オート）およびなし（0 0オート）：このプロパティは、2つの迅速な値を持っています。
フレックス：1; =>フレックス：1 1 0％;残りの部分又は欠落アイテムの幾何学的拡大及び縮小に基づいて、割り当てられたスピンドルの前方の空間を占有しない表します。
-
ALIGN-selfが他の項目との単一アイテムが異なる配向を有することができ、ALIGN-itemsプロパティをカバーすることができます。親は、ストレッチに相当しない場合、デフォルト値は、親要素のALIGN-アイテム属性の継承を示す、自動で
グリッドレイアウト
基本的なネットワークプラッド局
<div class="Grid"> <div class="Grid-cell">...</div> <div class="Grid-cell">...</div> <div class="Grid-cell">...</div> </div>
.Grid { display: flex; } .Grid-cell { flex: 1; }
百分比布局
オート：1（フレックス：1 1 0％）、従って伸縮容器の大きさ、屈曲すると固定されていません。
1/2：サイズはフレックス、固定幅のコンテナが50％を占めている：0 50％。
1/3：サイズはフレックス、固定幅のコンテナが50％を占めている：0 0 33.3％。
1/4：サイズはフレックス、固定幅のコンテナが50％を占めている：0 25％。