CSS3 Flexible Box

CSS3 Flexbox

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

使用flexboxページのレイアウトが異なる画面サイズと異なる表示デバイスに対応しなければならないときに要素が予想どおりに動作することを保証します。

多くのアプリケーションでは、柔軟なボックスモデルは、浮動小数点数を使用し、またその内容の余白とフレックスコンテナのマージンの崩壊を行わないことでブロックモデルを超える改善を提供します。

ブラウザのサポート

表中の数字は完全に機能をサポートする最初のブラウザのバージョンを指定します。

数字は続い-webkit-または-moz-接頭辞で働いていた最初のバージョンを指定します。

CSS3 Flexbox概念

Flexboxフレックスコンテナやフレックス項目から構成されています。

フレックスコンテナを設定することによって宣言されdisplayのいずれかに要素のプロパティをflex （ブロックとしてレンダリング）またはinline-flex （インラインとしてレンダリング）。

フレックスコンテナの内部に一つ以上のフレックスの項目があります。

注意：フレックスコンテナの外側とフレックス項目内部のすべてがいつものようにレンダリングされます。 フレキシボックスは、フレックスコンテナ内でどのように配置されるか、フレックス項目を定義します。

Flexの項目がフレックスラインに沿ってフレックスコンテナの内側に配置されています。 デフォルトでは、フレックスコンテナごとに1つだけのフレックスラインがあります。

次の例では、3つのフレックス項目を示しています。 これらはデフォルトで配置されている：水平フレックスラインに沿って、左から右へ：

フレックス線の方向を変更することも可能です。

我々が設定した場合directionにプロパティをrtl （右から左）、テキストは右から左に描画され、また、フレックスラインは、ページレイアウトを変更します方向を変更します。

Flexの方向

flex-directionプロパティは、フレックスコンテナ内柔軟なアイテムの方向を指定します。 デフォルト値のflex-directionあるrow （左から右、上から下）。

次のように他の値は次のとおりです。

• row-reverse -書き込みモード（方向）が左から右にされている場合は、フレックスアイテムは右から左にレイアウトされます
• column -ライティングシステムが水平になっている場合は、フレックスアイテムが垂直方向にレイアウトされます
• column-reverse -列と同じですが、逆に

次の例では、使用した結果を示しrow-reverse値：

次の例では、使用した結果を示しcolumn値：

次の例では、使用した結果を示してcolumn-reverse値：

正当化するコンテンツプロパティ

justify-contentアイテムがメイン軸上のすべての利用可能なスペースを使用しないときに、プロパティは、水平方向にフレキシブルコンテナのアイテムを揃えます。

設定可能な値は次のとおり：

• flex-start -デフォルト値。 アイテムは、コンテナの先頭に配置されています
• flex-end -アイテムは、容器の端部に配置されています
• center -アイテムは、容器の中央に位置しています
• space-between -アイテムがライン間のスペースで配置されています
• space-around -アイテムは間、および行の後、前にスペースが配置されています

次の例では、使用した結果を示しflex-end値：

次の例では、使用した結果を示してcenter値：

次の例では、使用した結果を示しspace-betweenの値を：

次の例では、使用した結果を示しspace-around値を：

ALIGN-項目プロパティ

align-itemsアイテムはクロス軸上のすべての利用可能なスペースを使用しないときに、プロパティは、垂直方向にフレキシブルコンテナのアイテムを揃えます。

設定可能な値は次のとおり：

• stretch -デフォルト値。 アイテムは、コンテナに収まるように伸縮され
• flex-start -アイテムは、容器の上部に配置されています
• flex-end -アイテムは、容器の底部に配置されています
• center -アイテムが容器の中央に配置されている（上下方向）
• baseline -アイテムは、容器のベースラインに配置されています

次の例では、使用した結果を示してstretch （これはデフォルト値です）値：

次の例では、使用した結果を示しflex-start値：

次の例では、使用した結果を示しflex-end値：

次の例では、使用した結果を示してcenter値：

次の例では、使用した結果を示しbaseline値を：

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

flex-wrapプロパティが1フレックスライン上で彼らのために十分なスペースがない場合は、フレックス項目は、ラップすべきか否かを指定します。

設定可能な値は次のとおり：

• nowrap -デフォルト値。 柔軟性のある項目は折り返されません
• wrap -必要に応じて柔軟なアイテムがラップします
• wrap-reverse -必要に応じて柔軟な項目は、逆の順序で、ラップします

次の例では、使用した結果を示してnowrap値を（これはデフォルト値です）：

次の例では、使用した結果を示してwrap値：

次の例では、使用した結果を示してwrap-reverse値：

ALIGN-コンテンツプロパティ

align-contentプロパティは、の挙動修正flex-wrapプロパティを。 するのに似ているalign-itemsのではなく、フレックスアイテムを揃えるのではなく、フレックスラインを揃えます。

設定可能な値は次のとおり：

• stretch -デフォルト値。 行は、残りのスペースを取るためにストレッチ
• flex-start -行はフレックスコンテナの開始に向けてパックされています
• flex-end -行はフレックスコンテナの端部に向かってパックされています
• center -行はフレックスコンテナの中心に向かってパックされています
• space-between -行が均等にフレックスコンテナに分布しています
• space-around -行が均等にどちらかの端にハーフサイズのスペースで、フレックスコンテナに分布しています

次の例では、使用した結果を示してcenter値：

Flexのアイテムのプロパティ

発注

orderプロパティは、同じコンテナ内の柔軟なアイテムの残りの部分に柔軟な項目の相対的な順序を指定します。

マージン

設定margin: auto;余分なスペースを吸収します。 異なる位置にフレックスアイテムをプッシュするために使用することができます。

次の例では、設定margin-right: auto;最初のフレックスアイテムに。 これは、すべての余分なスペースは、その要素の右に吸収されるようになります：

パーフェクトセンタリング

完璧なセンタリング：次の例では、ほぼ毎日、問題を解決します。

それはフレキシボックスと非常に簡単です。 設定margin: auto;アイテムが完全に両方の軸を中心に行います。

揃える自己

align-selfフレックスアイテムのプロパティは、そのアイテムのフレックスコンテナのアライン-itemsプロパティをオーバーライドします。 これは、同じ可能な値がありalign-itemsプロパティを。

次の例では、各フレックス項目に異なる整列自己の値を設定しています。

フレックス

flexプロパティは、同じコンテナ内のフレックスアイテムの残りの部分に比べて、フレックス項目の長さを指定します。

次の例では、最初のフレックス項目は空き領域の2/4を消費し、他の2つのフレックスの項目は、自由空間それぞれの1/4を消費します。

その他の例

フレキシボックスで応答性のウェブサイトを作成します。
この例では、フレキシボックスに応答するWebサイトのレイアウトを作成する方法を示します。

CSS3フレキシボックスのプロパティ

次の表は、フレキシボックスで使用されるCSSプロパティを示しています。