フレキシボックス弾性レイアウトの概要

HTMLのレイアウトについては、CSSスタイルは、私たちのフロントエンド開発の基本的なスキルの一つである;（ディスプレイ+位置+フロートおよび制御する他のCSSプロパティ）伝統的なレイアウトの仕方によって、HTMLページをレイアウトする前に、しかしによる伝統的な方法のレイアウトの効率が低いことに、それがW3C提案されています新しいレイアウトスキーム - 柔軟なレイアウト（レイアウトフレキシボックス）;

ボックスモデルで

ボックスモデルを理解することは、レイアウトを学ぶための重要なステップです。ボックスのサイズを計算する方法。ボックスサイズの計算の2つのバージョンがあります。

W3Cの標準（主要なブラウザとIE7 +のサポート）：ボックスのサイズ、内容（コンテンツ）、パディング（パディング）、ボーダー（境界線）を含め、余白（マージン）四つの部分。
癖モード（IE7は、主に次のバージョン）：ボックスのサイズ（コンテンツ）の内容、余白（マージン）は、これらの二つの部分を含みます。

ほとんどIE7印刷の現在のバージョンので、W3C標準ボックスサイズを導入するように計算されます。次のコードに示すように：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>盒子模型</title>
    <style type="text/css">
        .box {
            width:200px;
            padding:20px;
            border:2px solid #f00;
            margin:10px;
        }
    </style>
</head>

<body>
    <div class="box">
        我是个W3C标准盒子(content+padding+border+margin)
    </div>
</body>
</html>

DIV要素がパディング、境界及びマージン特性コードの上方に設けられ、その後、ボックスサイズ：200 + 20である2 + 2 2 + 10 2 = 264（幅/即ちコンテンツ+パディング 2 +ボーダー2 +マージン 2）; W3C以下に示すように、標準のボックスモデル、：
ここに画像を挿入説明

箱サイズの計算の概要：

盒子宽幅=コンテンツ+パディング左+パディング右+ボーダー左+ボーダー右+マージン、左マージン+右;
盒子高身長=コンテンツ+パディングトップ+パディングボトム+ボーダートップ+ BORDER-下の+マージントップ+マージン下;

トピック（フレキシボックス弾性レイアウト記述）に

フレキシボックスも弾性レイアウトとして知られる高速なレイアウトを実現するために提案された新しいW3Cレイアウトスキーム、です。ただ、次の点を十分に把握するフレキシボックス弾性レイアウトすることができ覚えています。

Flexのレイアウトコンテナとコンテナのメンバーを分けています。声明Flexのレイアウト要素は、コンテナと呼ばれます。Flexのレイアウト要素は、容器部材と呼ばれる子要素をラップされ、コードを次のように：

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Flex布局</title>
  <style type="text/css">
      .parent {
        display: flex;
        border:1px solid #f00;
        padding:10px;
      }
      .child {
        flex:1;
        border:1px solid #00f;
      }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child">我是成员一</div>
    <div class="child">我是成员二</div>
    <div class="child">我是成员三</div>
  </div>
</body>
</html>

表示によって親クラスとして上記のコードに：曲がる、フレックスレイアウトとして宣言され、それは容器、子コンテナ部材であるので、
2はXY軸の屈曲点がレイアウト、および軸方向（X軸-左から右へ）上から下へ、下から上へ- Y軸;右へ。座標系リニアX軸とY軸と同様、主な特徴は、容器部材の配向方向を決定します。X軸が主軸になっており、Y軸は、クロス軸になります。下図のように：

ここに画像を挿入説明

上記のように：灰色のFlexレイアウトコンテナ、Y軸配向ブロックレイアウトを表す上から下に、青、レイアウトに配置された赤色のブロックを表し、X軸方向に左から右へ。

1（なし幅の前提の下で）：容器部材コンテナの通常平均合計幅は、各部材は、フレックス設定する必要があります。容器の部材が設けられている場合widthプロパティは、平均（容器の幅 - メンバーAの幅）の残りのメンバー残りの幅の、

FlexのレイアウトCSSプロパティの説明

たとえば、上記のように、Flexのレイアウトコンテナとコンテナ部材、CSS特性および属性を区別することができる容器のCSSレイアウトプロパティを区別する。

属性のコンテナセット：

フレックス方向（容器の主方向を決定するために使用されます）
フレックスラップ（一方の軸上に配置されたItem要素のメンバーの全てよりも少ない、改行を配置することができる容器を提供）
フレックスフロー（フレックス方向性とフレックスラップ性の短い形式、デフォルト値の行NOWRAP）
正当化コンテンツを（正当化コンテンツ属性は、I（主）軸方向Xに位置合わせ部材を定義します）
ALIGN-アイテム（正当化コンテンツ属性は、軸方向にY（クロス）に整列部材を規定します）
ALIGN-コンテンツ（複数の軸の定義された位置合わせ、一つの軸のみプロジェクトは、プロパティが機能しない場合）

CSS属性のコンテナメンバー：

オーダー（順序定義された項目、値が小さいほど、より前方に配置、省略時は0）
屈曲-成長（デフォルトは、すなわち、0であり、アイテムが拡大を定義する空きスペースがある場合に、増幅されていません）
屈曲収縮（減速比定義アイテムのデフォルトは1、すなわちスペースが不足している場合、縮小項目こと）
フレックス基礎（余分なスペースを分配する前に定義されたスピンドルスペース、アイテム占有（メインサイズ））
フレックス（フレックス成長、収縮フレックスとフレックス基底速記、デフォルト値0 1自動;つのみ要素フレックスを使用する場合：1フレックスを使用して複数の要素が存在する場合、画面全体で充填されるであろう：1人の関係が破壊されるスクリーン空間サイズ）
自己を整列（及び他は単一の項目項目が同一の整列が整列・アイテムができるカバレッジプロパティのを持たない可能）
FlexのCSS特性にレイアウトがあまりにも、あまりにも多くのスペースを占有するので、あまりにも多くの特定の参照ルアンYifengを導入しませんチュートリアル：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

個人的な経験では、ほとんどのFLE-方向であり、正当化コンテンツを、 -アイテム揃え;コンテナのプロパティとシーン内の特定の項目でフレックスコンテナ・メンバーシップ・プロパティをフレックスコンテナに親要素の宣言を曲げる：ディスプレイを使用し、最終的にはWebページのレイアウトにフレックスCSSプロパティに有効になります。デフォルトのレイアウトを使用してネイティブプロジェクトに反応して、有効にするので、追加の宣言、直接使用するフレックスのCSSプロパティフレックスではありません。