A：ディスプレイ：フレックスレイアウト

表示：フレックスレイアウトです。すなわち、それは容器に適用することができ、あるいはエレメント列に適用してもよいです。新しいスキームは、W3Cにより提案され、それは、簡単で完全な応答ページレイアウトのさまざまなを達成することができます。現時点では、それはすべてのブラウザでサポートされています。

Flexは、ボックスモデルに最大限の柔軟性を提供するために、「弾性レイアウト」を意味、柔軟なボックスの頭字語です。セットフレックスレイアウト後、サブエレメントフロート、クリア、および垂直align属性は失敗します。

2：6つのプロパティのフレックス

コンテナ要素フレックス方向（横配置デフォルト）の配列方向
1：フレックス方向：行、横方向エレメントように左から右にスピンドル

1536039075.png

2：フレックス方向：カラム;垂直スピンドル要素が上から下に垂直に配置されるように

1536039314（1）.PNG

3：曲がる方向を：行反転、横軸になるように要素が右から左へ

1536039460（1）.PNG
フレックスラップコンテナ要素をラップ（デフォルトはラップしない）
1：屈曲ラップ：NOWRAP;（デフォルト）要素がラップしない、など：50のそれぞれに自動的にこのプロパティ二DIV幅を設定DIV 100％の幅、％;
2：フレックスラップ：ラップ、例えば、要素をラップ：100％の幅のDIVをこのプロパティを設定し、DIVの2行目の第二。
スピンドル（ページ）に配置された正当コンテンツ要素
1：正当化コンテンツを：センター;スピンドル（ページ）に配置されたセンタリング要素

1536041764（1）.PNG

2：コンテンツを正当化：フレックススタートを、スピンドル要素（ページ）の上または左からのスタートに

1536041631（1）.PNG

3：コンテンツを正当化：屈曲端と、スピンドル要素（ページ）上で右または下から出発して配置されています

1536042053（1）.PNG

4：正当化コンテンツを：スペースの間に、上部および底部の周囲に配置された起動要素は、スピンドルまたは（ページ）で終わります

1536042390（1）.PNG

5：正当化コンテンツ：スペースの周りに、各要素の両側に等間隔。そのため、スペース要素と境界線よりも2倍の要素間の間隔。

1536042636（1）.PNG
電流線と横軸（縦）方向のスピンドル要素（ページ）のアライメントで、アイテムを揃える
ALIGN-アイテム：1フレックス開始; に対する弾性要素カセット（縦軸）の開始位置の境界側シャフト（上部に対して整列）は、出発境界線のライブ側シャフト。

1536043107（1）.PNG

2：ALIGN-商品：屈曲端、境界線のライブ側の軸端部に対して弾性要素カセット（縦軸）の開始位置の境界側シャフト。（下部が整列されています）

1536043238（1）.PNG

3：中心、行（縦軸）の軸のボックス側の頂部を中心に弾性要素：・アイテムを揃えます。（中心）

1536043373（1）.PNG

4： - 商品整列：ベースライン、ボックス弾性素子行側インナーシャフトと同一の軸を、「フレックススタート」同等の値。他の場合には、値がベースラインアラインメントを参加します。（上部に対して整列）
エラストマー容器内のALIGN-コンテンツ要素は、すべての利用可能なスペース容器に（垂直）交差整列軸によって占有されていません

<div id="main">
  <div style=""></div>
  <div style=""></div>
  <div style=""></div>
</div>
#main {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: flex-start;
}
#main div {
  width: 70px;
  height: 70px;
}

1：align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。