（本参考ルックアップ注）
フレックス弾性レイアウト
- 表示：フレックス紹介
- 1.flex方向：行|行逆|カラム|カラム逆|初期|継承（ボックス配列方向）
- 2.flexラップ：NOWRAP |ラップ|ラップ逆（分割行または列解体）
- （そして、プロジェクトと主軸方向（デフォルト水平方向）の周囲の空間の間）のスペースアラウンド|フレックススタート|フレックス・エンド|センター|スペース間：3.justify-コンテンツ
- 4.align-アイテム：ストレッチ|中央|フレックス開始|フレックス端|ベースライン（例えば中心として上下中央すべてのサブ要素ブロックするように）
- 5.align-内容：ストレッチ|センター|フレックススタート|フレックス・エンド| - との間のスペースは、|スペースアラウンド（ALIGN-content属性は、フレックスコンテナの複数行に適用されます）
- 6. ALIGN-自己：オート|ストレッチ|中央|フレックス開始|フレックス端|ベースライン（内部要素は、シャフト側の配置が異なります）
- 8.order：数|初期|継承（コンテナの場所の共有を設定します）
- 9.flex-成長：数（0に増幅し、デフォルトは増幅しません）
- 10.flex-シュリンク：数|初期|継承（プロパティは、プロジェクトのサイズを縮小することができますのでことを、弾性レイアウト「屈原」側を体現）
表示：フレックス紹介
プロパティは、古いルールの多くを壊すのでそう、なぜ強力かつ柔軟な理由の垂直クロス弾力のレイアウトを変更、弾性レイアウトでなければなりません。任意の要素は、弾性レイアウトに設定することができ、弾性レイアウトは、その内部の子要素に影響を与えます。
- ブロック要素は、もはや（一次元である）は、単一の行ありません。
- ブロック要素を明示的に幅が一定でない場合は、親要素が横方向にカバーされていません。
- フロート、明確、かつ垂直-alignプロパティは失敗します。
- 親要素で定義されているディスプレイ：フレックスは、その後、子供は弾性レイアウトに属します。
1.flex方向：行|行逆|カラム|カラム逆|初期|継承（ボックス配列方向）
（1）行：デフォルト値は、スピンドルは、右の項目に左左開始位置、水平です。
（2）行リバース：メインシャフト、右の開始位置に、右から左へのプロジェクト水平です。
（3）カラム：垂直スピンドル、トップ項目に開始位置は、上から下に垂直に表示されます。
（4）カラム逆スピンドルが下位置から始まる、垂直で、プロジェクトは、垂直下から上に、表示されます。
コード：
/*flex-direction: row;*/
#main1{
width:400px;
display:flex;
flex-direction: row;
background: #ccc;
}
#main1 div{
width:50px;
height:50px;
}
/*flex-direction: row-reverse;*/
#main2{
width:400px;
display:flex;
flex-direction: row-reverse;
background: #ccc;
}
#main2 div{
width:50px;
height:50px;
}
2.flexラップ：NOWRAP |ラップ|ラップ逆（分割行または列解体）
つまり、ラインカバーの後の行です。
（1）.nowrap：デフォルト値は、所定の項目がコンテナの行または列分割表示では除去されません。
（2）.wrap：解体容器の行または列が必要なときに自動的に削除表示された所定のアイテム。
（3）.wrapリバース：コンテナ内のアイテムの所定の分割線または列は、自動的に必要なときに除去するが、逆の順序で表示します。
コード：
#main2 {
width: 200px;
display:flex;
flex-wrap: wrap;
background:#ccc;
}
#main2 div {
width: 50px;
height: 50px;
text-align:center;
line-height:50px;
}
追加：フレックスフロー（結合書かれた1,2）
フレックスフロー：[フレックス方向] [フレックスラップ];
上限これが書かれている1,2
彼らは、属性値1に直接書き込むことができますフレックス方向フレックスラップ位、2つの
コード：
#main {
width: 200px;
display:flex;
flex-flow:row-reverse wrap;
background:#ccc;
}
#main div {
width: 50px;
height: 50px;
text-align:center;
line-height:50px;
}
（そして、プロジェクトと主軸方向（デフォルト水平方向）の周囲の空間の間）のスペースアラウンド|フレックススタート|フレックス・エンド|センター|スペース間：3.justify-コンテンツ
（1）.flex-それ開始：デフォルト値は、スピンドルの開始位置に所定のアイテムコンテナ。
（2）.flexエンド：プロジェクトは、容器スピンドル端部の所定の位置に配置されています。
（3）.center：容器の所定の中間スピンドルを投影します。
（4）.SPACE-間の2つの端部は、所定のスピンドルプロジェクトに配列されています。
（5）.SPACEアラウンド：商品所定の容器の側面を等間隔に保持されています。
コード：
#main1 {
width: 400px;
background:#ccc;
display: flex;
justify-content:space-between;
}
#main1 div {
width: 70px;
height: 70px;
text-align:center;
line-height:70px;
}
#main2 {
width: 400px;
background:#ccc;
display: flex;
justify-content:center;
}
#main2 div {
width: 70px;
height: 70px;
text-align:center;
line-height:70px;
}
4.align-アイテム：ストレッチ|中央|フレックス開始|フレックス端|ベースライン（例えば中心として上下中央すべてのサブ要素ブロックするように）
（1）.stretch：デフォルトレイアウト弾性容器は交差軸方向におけるコンテナプロジェクトに適合するように延伸されます。
（2）.center：弾性所定のレイアウトコンテナのアイテムは、クロス軸方向の中心。
（3）.flex-itが開始：弾性は、開始位置プロジェクトのクロス軸配置をレイアウトコンテナを所定。
（4）.flexエンド：容器と整列所定の交差軸項目レイアウト弾性終了位置。
（5）.baseline：弾性所定のレイアウトコンテナのアイテムは、テキストの最初の行のベースラインに整列されます。
コード：
#main {
width: 200px;
height: 100px;
background:#ccc;
display: flex;
align-items: center;
}
#main div {
width: 70px;
height: 20px;
}
5.align-内容：ストレッチ|センター|フレックススタート|フレックス・エンド| - との間のスペースは、|スペースアラウンド（ALIGN-content属性は、フレックスコンテナの複数行に適用されます）
フレックスラップで、より良いです。
（1）.stretch：デフォルト値は、所定のラインは、アイテムが延伸される容器のクロス軸のサイズに適応するように延伸されます。
（2）.center：容器と交差する所定の容器線が中心軸。（3）.flex-itが開始：容器と交差する所定の容器の線は、整列開始位置を軸
（4）.flexエンド：容器と交差する所定のラインの端部は、容器の位置と整列軸
（5）.SPACE-間：両端で交差軸を整列コンテナ指定されたコンテナの行、列間の間隔は等しいです。
（6）.SPACEアラウンド：容器列の両側にすべての所定の等間隔。したがって、ライン間の間隔よりも容器の行間隔のエッジが倍増しました。
コード：
#main {
width: 200px;
height: 300px;
background:#ccc;
display: flex;
flex-wrap: wrap;
align-content:space-between;
}
#main div {
width: 50px;
height: 20px;
}
<div id="main">
<div style="background-color:red;">1</div>
<div style="background-color:coral;">2</div>
<div style="background-color:yellow;">3</div>
<div style="background-color:green;">4</div>
<div style="background-color:red;">1</div>
<div style="background-color:coral;">2</div>
<div style="background-color:yellow;">3</div>
<div style="background-color:green;">4</div>
<div style="background-color:red;">1</div>
<div style="background-color:coral;">2</div>
<div style="background-color:yellow;">3</div>
<div style="background-color:green;">4</div>
<div style="background-color:red;">1</div>
<div style="background-color:coral;">2</div>
<div style="background-color:yellow;">3</div>
<div style="background-color:green;">4</div>
</div>
6. ALIGN-自己：オート|ストレッチ|中央|フレックス開始|フレックス端|ベースライン（内部要素は、シャフト側の配置が異なります）
（1）.auto：弾性容器のALIGN-アイテムを継承デフォルト属性値、コンテナは、弾性ALIGN-アイテム、デフォルト値ストレッチ場合は提供されません。
（2）.stretchは：十字軸に延伸された容器を使用する所定の大きさを投影します。
（3）.center：プロジェクトは、行と交差する所定の軸を中心とします。
（4）.flex-itが開始：行の所定の項目の開始位置は、軸方向に交差配列されています。
（5）.flexエンド：プロジェクトは、行終了位置と交差する所定の軸が整列されます。
（6）.baseline：プロジェクトは、ベースラインの行に整列されていることを提供します。
コード：
#main {
width: 300px;
height: 200px;
background:#ccc;
display: flex;
flex-flow: row wrap;
}
#main div {
width: 70px;
height: 70px;
}
#main div:nth-child(2n) {
align-self: center;
}
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:green;"></div>
<div style="background-color:blue;"></div>
<div style="background-color:red;"></div>
<div style="background-color:yellow;"></div>
</div>
実際には2n個の項目ブロックの倍数。
追加1：差ALIGN-項目とALIGN-コンテンツ
属性には、アイテムを揃えることができますフレックスのすべての船舶に適用されますその役割は、フレックスの各行の交差点にセットデフォルトの子フレックス配向軸にあります。
ALIGN-コンテンツマルチラインのみフレックスコンテナに適用されますフレックススタート（すなわち、子コンテナは、よりのみ効果属性行より屈曲）、その役割は、容器全体（属性値としてクロス軸、サブアイテムに余分なスペースがあるとき場合撓むことです、フレックスの端部は、中央の時間）が並んでいます。次のように異なる値の効果があります
追加2：差ALIGN-アイテムと整列自己
ALIGN-項目は親コンテナ（スタイルシートにスタイルを書くことがディスプレイを含んでいる）として使用され、その後、我々はこのスタイルで全ての子を設定することができます。子コンテナに作用するためにALIGN-selfは、設定した後、唯一の設定このCCTVの子供はこのスタイルを持つことができます。
8.order：数|初期|継承（コンテナの場所の共有を設定します）
（1）.NUMBER：デフォルト値は0です。注文条項（、各色の位置を設定されている）フレックスプロジェクト。
#main {
width:400px;
height:150px;
display:flex;
background:#ccc;
}
#main div{
width:70px;
height:70px;
}
div#coral{order:2;}
div#lightblue{order:4;}
div#lightgreen{order:3;}
div#pink{order:1;}
<div id="main">
<div style="background-color:coral;" id="coral">1coral</div>
<div style="background-color:lightblue;" id="lightblue">2lightblue</div>
<div style="background-color:lightgreen;" id="lightgreen">3lightgreen</div>
<div style="background-color:pink;" id="pink">4pink</div>
</div>
9.flex-成長：数（0に増幅し、デフォルトは増幅しません）
拡大フレックス成長アイテム属性定義、デフォルトは0、すなわち増幅されません。コンテナの残りのスペースが存在しない場合は、ズームインすることができません
（1）.NUMBER：ゼロ値のデフォルトは、サブの所定の拡大率のためには、コントラスト比やその他の項目が決定されます。
コード：
#main {
width: 350px;
height: 100px;
background:#ccc;
display: flex;
}
#main div{flex-basis:50px;}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
10.flex-シュリンク：数|初期|継承（プロパティは、プロジェクトのサイズを縮小することができますのでことを、弾性レイアウト「屈原」側を体現）
この属性は、デフォルト値は1で、シャフト項目のコンテナの減速比を指定します。
我々は、次の点に特に注意を払う必要があります：
（1）このプロパティは、コンテナ上のプロジェクトに適用されます。
（2）スピンドル上のコンテナのサイズは、以下のプロジェクトのサイズより縮小可能でなければなりません。
（3）ゼロの値は、減少部分のプロジェクトを示しています。
（4）それ以外の場合は無効、弾性レイアウト環境に適用されなければなりません。
（5）数：デフォルト値は、コンテナが比他のアイテムとアイテムを検索するために、1です。
コード：
#main {
width:350px;
height:100px;
background:#ccc;
display:flex;
}
#main div {
flex-shrink:1;
flex-basis:100px;
}
#main div:nth-of-type(2) {flex-shrink:3;}
11フレックス基礎：数|オート（初期ベンチマークのサイズを設定するプロジェクトのために）
フレックス基礎と幅の属性が存在する場合、属性は有効幅、フレックス基礎のためのフレックスアイテムセットの幅の幅ではありません
（1）数：長さまたはパーセンテージ、フレックス初期プロジェクトの所定の長さの単位。
（2）自動：項目の長さが指定されていない場合、デフォルト値は、長さが決定の内容に応じて、フレックスプロジェクト自体の長さに等しいです。
追加1：フレックス= 1
フレックス：] [フレックス成長[フレックスシュリンク] [フレックス基礎] |オート| 1
このプロパティフレックス成長し、フレックスシュリンク複合書き込みやフレックス基礎プロパティです。デフォルトの属性値は0 1 autoです。要素は、Flexプロジェクトではない場合、このプロパティは機能しません。子供に作用します。
（1）.auto：同じと1つのオート。
（2）.none：同じ0 0自動車。
同一の（3）1 0 1自動デフォルト値。
追加2：現在のフレックス互換性
私たちは、テーブルにまっすぐに向かう
すべてのブラウザとの互換性をすでにフレキシボックスは、あなたが彼の並外れた才能にそれを表示するためにフレキシボックスを使用することができ、我々はそれを参照してください！
