CSS3柔軟なボックス

CSS3柔軟なボックスは、新しいレイアウトモードです。

柔軟ポーチレイアウトモデルを導入する目的は、空白のコンテナのサブ要素、整列および分布を手配するためのより効率的な方法を提供することです。

ブラウザのサポート

表中の数字は、プロパティバージョン番号をサポートする最初のブラウザを表します。

すぐに数-webkit-ブラウザまたは-moz-指定された接頭辞の後に。

CSS3フレキシブルボックスの内容

弾性コンテナ（Flexコンテナ）と弾性サブ要素（フレックス項目）コンポーネントからなるフレキシブルボックス。

表示プロパティを設定することにより、弾性容器はフレックスであるか、またはインラインフレックスは、弾性コンテナとして定義されます。

弾性容器は、一つ以上の弾力性のサブ要素が含まれています。

注：弾性外側容器と弾性要素は、通常のレンダリングの子です。 柔軟なボックスには、弾性コンテナのレイアウト内でのみどのように弾力性のある子要素を定義します。

柔軟なサブ要素は、通常は弾性ラインボックスに表示されます。 デフォルトでは、各コンテナは一行だけです。

以下は、弾性要素の子要素が1行に表示されている示し、左から右へ：

もちろん、私たちは、配置を変更することができます。

我々が設定した場合directionにプロパティをrtl （右から左）、弾性サブ要素の配置が変更され、変更ページのレイアウトも続きます：

フレックス方向

flex-direction順序は、親コンテナ内弾性サブ要素を指定します。

文法

flex-direction: row | row-reverse | column | column-reverse

flex-direction値は次のとおりです。

• 行：横方向に左から右（左）、デフォルトの配置に。
• 行リバース：横方向前方後列、上部にある最後の1から、右詰め（整列逆。
• コラム：垂直配置。
• 列の逆：上部の前方後列から、垂直配置を逆にし、最後に行。

次の例は示してrow-reverseを使用します：

次の例は示してcolumn使用を：

次の例では、実証column-reverseを使用します：

正当化-content属性

アプリケーションコンテナの弾性特性、主軸（主軸​​）に沿って整列弾性弾性コンテナのアイテムのコンテンツのアライメント（正当化-コンテンツ）。

次のように正当化コンテンツ構文は次のとおりです。

justify-content: flex-start | flex-end | center | space-between | space-around

各値の分析：

• フレックススタート：
  

  充填の隣に最初の行への柔軟なプロジェクト。 これがデフォルトです。 弾性アイテムの外側のエッジからの第一主スタートがラインのメインスタートエッジに配置され、ひいてはその後のフラッシュは弾性用語を置きました。

• フレックスエンド：
  

  充填に次の行の末尾に柔軟なプロジェクト。 弾性糸の外側から第一主エンドの項目は、ラインのメイン端縁に配置され、ひいてはその後のフラッシュは弾性用語を置きました。

• センター：
  

  柔軟なプロジェクトが埋めるために、次の中心。 （残りの空き領域が負の場合、プロジェクトはまた、両方の方向に弾性をオーバーフローします）。

• スペースの間：
  

  柔軟なプロジェクトが均等に行上に分布します。 スペースは、負または唯一の弾性用語、フレックススタートに相当する値である場合。 それ以外の場合は、最初の行の外側のエッジからの主なスタートと弾性アイテムの整列、メインのエンドラインとサイドラインマージンが隣接する弾性ラインの残りの項目の弾性用語整列と分布を、持続しながら、均等にアイテムを離間さ。

• スペースアラウンド：
  

  柔軟なプロジェクトは均等領域の左半分の両側に、直線上に分布します。 スペースが負かだけ弾性的な用語である場合、値は中央に相当します。 両側と弾性容器上に頭と尾の間の間隔の半分を（1/2 * 20ピクセル= 10pxの）残しながらそれ以外の場合は、配電線に沿ってプロジェクトの弾力性はと同じように、（例えば、20ピクセルです）離間します。

レンダリングが示しています。

以下の実施例は、 flex-endを使用します：

以下の実施例は、 centerの使用を：

次の例では、実証space-betweenの使用を：

次の例では、実証space-around使用しました：

ALIGN-項目プロパティ

align-itemsに設定するか、ボックス軸（縦軸）の配向方向の側に弾性要素を取得します。

文法

align-items: flex-start | flex-end | center | baseline | stretch

各値の分析：

• フレックススタート：スタートライン境界のライブ側の軸の開始位置に対するボックス要素弾性軸（縦軸）の境界側。
• フレックスエンド：ライン境界の側軸端を生きるための開始位置に対するボックス要素軸（縦軸）の弾性境界側。
• センター：上のライン側の軸（縦軸）の中央に配置された弾性要素ボックス。 （サイズボックス要素の弾性線のサイズよりも小さい場合には、両方向のオーバーフローで同じ長さです）。
• ベースライン：そのような弾性内側シャフトとサイドシャフトラインとしてボックス要素は、「フレックススタート」同等の値と同じです。 他の場合には、値がベースラインの整列に関与します。
• ストレッチ： 'auto'であるマージンボックス属性の大きさは、シャフトの側面のサイズを指定した場合、その値は、サイズなどのラインアイテムに近くなりますが、「最小/最大幅/高さ "プロパティに従います制限。

以下の実施例は、 stretch(默认值)を使用すること：

以下の実施例は、 flex-startを使用します：

以下の実施例は、 flex-endを使用します：

以下の実施例は、 centerの使用を：

以下の実施例は、 baseline使用：

フレックスラッププロパティ

フレックスラップ属性は、弾性ボックス子要素ラップモードを指定するために使用されます。

文法

flex-flow:  || 

各値の分析：

• nowrapを-デフォルトでは、単一のラインなどの弾性コンテナ。この場合、弾力性のある子は、コンテナをオーバーフローする可能性があります。
• ラップ-弾性コンテナ複数行。弾力性のある子のオーバーフロー部分が新しい行にこのケースに収納され、内部の改行は、サブキーを発生します
• ラップ逆-ラップ順序を逆にします。

以下の実施例は、 nowrap使用を：

以下の実施例は、 wrapの使用を：

以下の実施例は、 wrap-reverse使用は：

ALIGN-content属性

align-content属性を変更するために使用されるflex-wrap属性の振る舞いを。 同様のalign-itemsが、それは弾性のサブ要素の配置を設定しますが、それぞれの行の配置を設定されていません。

文法

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各値の分析：

• stretch -デフォルト。 各行には、残りのスペースを占有するためにストレッチします。
• flex-start -積み重ねられた箱の行を弾性容器の開始位置に。
• flex-end -弾性コンテナの終了位置まで積み重ねボックスの列。
• center -弾性容器の中間位置に積み重ねられた箱の列。
• space-between -各行は均等に分散柔軟なパウチ容器。
• space-around -柔軟なパウチ容器内の各行は、同様にサブ要素とサイズ間隔サブ要素の半分を保持するために、2つの端部の間に分布します。

以下の実施例は、 centerの使用を：

柔軟なサブ要素の属性

シーケンス

文法

order: 

各値の分析：

• <整数>：上面の中に小さな値の順序を定義するために使用される整数値。 それは負になることができます。

order弾性コンテナの子要素の弾性特性内のプロパティを設定します：

整列します

設定の「余白」が「自動」値、自動的に残りのスペースに弾性容器を得ます。 そのように「自動」の垂直マージン値を設定し、それは、弾性サブ要素が完全に弾性容器の二軸方向に集中していることができます。

次の例では、最初のサブ弾性要素セット上にあるmargin-right: auto; 。 残りのスペースは、右の要素に格納されます。

パーフェクトセンター

次の例では、我々は通常、中心に遭遇する問題には完璧なソリューションとなります。

弾性ボックス、中心部はわずか設定したい、非常に簡単になりmargin: auto;完全に中央2の軸方向に弾性サブ要素を行うことができます。

揃える自己

align-self属性は、軸（縦軸）側の弾性要素自体の配向方向を設定するために使用されます。

文法

align-self: auto | flex-start | flex-end | center | baseline | stretch

各値の分析：

• オート：それは親、「ストレッチ」の計算値を持っていない場合は、「揃える自己 'を値' auto 'で、要素の親要素の計算値は、値「-アイテム揃え」をした場合。
• フレックススタート：スタートライン境界のライブ側の軸の開始位置に対するボックス要素弾性軸（縦軸）の境界側。
• フレックスエンド：ライン境界の側軸端を生きるための開始位置に対するボックス要素軸（縦軸）の弾性境界側。
• センター：上のライン側の軸（縦軸）の中央に配置された弾性要素ボックス。 （サイズボックス要素の弾性線のサイズよりも小さい場合には、両方向のオーバーフローで同じ長さです）。
• ベースライン：そのような弾性内側シャフトとサイドシャフトラインとしてボックス要素は、「フレックススタート」同等の値と同じです。 他の場合には、値がベースラインの整列に関与します。
• ストレッチ： 'auto'であるマージンボックス属性の大きさは、シャフトの側面のサイズを指定した場合、その値は、サイズなどのラインアイテムに近くなりますが、「最小/最大幅/高さ "プロパティに従います制限。

次の例では、弾性サブ要素が揃え自己異なる値の適用効果を示しています。

フレックス

flex属性は、弾性サブ要素のためのスペースを割り当てる方法を指定するために使用されます。

文法

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

各値の分析：

• なし：なし計算キーワードは次のとおりです。0 0オート
• [フレックス成長]：弾性要素ボックスの膨張比の定義。
• [フレックス縮小]：弾性要素ボックス収縮率の定義を。
• [フレックス基礎]：デフォルトの基準値は、ボックスの弾性要素を定義します。

次の例では、最初のサブ弾性要素は、スペースの2/4、他の二つの各1/4のスペース占有します：

より多くの例

弾性ボックスを使用して応答ページを作成します。

CSS3柔軟なボックスのプロパティ

次の表は、一般的に弾性特性にボックスするのに使用します：