CSS3 フレキシブルボックス

CSS3 フレキシブルボックス

Flexible boxes または flexbox は、CSS3 における新しいレイアウトモードです。

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

多くのアプリケーションに対し、フレキシブル・ボックス・モデルは、フロートを使わず、またコンテンツのマージンとフレックス・コンテナのマージンを 折畳まないことで、ブロックモデルを超える改善を提供します。

ブラウザ・サポート

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

数字の後に続く -webkit- または -moz- は、接頭辞付きで動作した最初のバージョンです。

CSS3 フレキシブルボックスのコンセプト

フレキシブルボックスは、フレックス・コンテナとフレックス項目から構成されます。

フレックス・コンテナは、display プロパティに flex（ブロックとして表示）または inline-flex （インラインとして表示）を設定することで宣言されます。

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

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

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

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

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

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

Flex の方向

flex-direction プロパティは、フレックス・コンテナ内のフレキシブル項目の方向を指定します。 flex-direction のデフォルト値は、row (左から右、上から下) です。

その他の値は次の通りです：

• row-reverse - 書き込みモード（direction）が左から右の場合は、フレックス項目は右から左に配置されます
• column - writing システムが horizontal の場合、フレックス項目は vertically に配置されます
• column-reverse - column と同じだが、その逆に配置されます

次の例は、row-reverse 値を使用した結果を示しています：

次の例は、column 値を使用した結果を示しています：

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

justify-content プロパティ

justify-content プロパティは、フレックスコンテナ内の主軸の方向に余白が生じる場合に、フレックス項目と余白を どのように配置するかを指定します。

指定可能な値は次の通りです：

• flex-start - デフォルト値。項目は、コンテナの始端側に配置される
• flex-end - 項目は、コンテナの終端側に配置される
• center - 項目は、コンテナの中央に配置される
• space-between - 項目は、行の余白を均等配分して配置される
• space-around - 項目は、余白を行の前後と中間に配分して配置される

次の例は、値 flex-end を使用した結果を示しています：

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

次の例は、値 space-between を使用した結果を示しています：

次の例は、値 space-around を使用した結果を示しています：

align-items プロパティ

align-items プロパティは、フレックスコンテナ内の交差軸の方向に余白が生じる場合に、フレックス項目と余白を どのように配置するかを指定します。

指定可能な値は次の通りです：

• stretch - デフォルト値。項目は、コンテナに収まるように拡張される
• flex-start - 項目は、コンテナの上端側に配置される
• flex-end - 項目は、コンテナの下端側に配置される
• center - 項目は、コンテナの中央 (縦) に配置される
• baseline - 項目は、コンテナのベースラインに配置される

次の例は、値 stretch を使用した結果を示しています (これがデフォルト値です)：

次の例は、値 flex-start を使用した結果を示しています：

次の例は、値 flex-end を使用した結果を示しています：

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

次の例は、値 baseline を使用した結果を示しています：

flex-wrap プロパティ

flex-wrap プロパティは、フレックス項目がフレックスライン 1 行に収まらない場合、ラップすべきかどうかを指定します。

指定可能な値は次の通りです：

• nowrap - デフォルト値。フレックス項目はラップしない
• wrap - 必要な場合、フレックス項目はラップする
• wrap-reverse - 必要な場合、フレックス項目はラップするが、逆向きになる

次の例は、値 nowrap を使用した結果を示しています (this is the default value):

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

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

align-content プロパティ

align-content プロパティは、flex-wrap プロパティの動作を変更します。 align-items に似ていますが、フレックス項目を揃えるのではなく、フレックスラインを揃えます。

指定可能な値は次の通りです：

• stretch - デフォルト値。行は、残りの余白が配分され、拡張される
• flex-start - 行は、フレックスコンテナの始端側に寄せられる
• flex-end - 行は、フレックスコンテナの終端側に寄せられる
• center - 行は、フレックスコンテナの中央に寄せられる
• space-between - 行は、フレックスコンテナに均等配分される
• space-around - 行は、フレックスコンテナに均等配分されるが、先頭と末尾は他の半分になる

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

フレックス項目のプロパティ

順序

order プロパティは、同じコンテナ内の他のフレックス項目と比較した、フレックス項目の順序を指定します：

マージン

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

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

完璧なセンタリング

次の例は、殆ど日常的な問題である：完璧なセンタリングを解決します。

フレキシボックスを使うと非常に簡単です。margin: auto; を設定すれば、完全に両軸の中央に項目が配置されるようになります：

align-self

フレックス項目の align-self プロパティは、項目に対するフレックスコンテナの align-items プロパティをオーバーライドします。 これは、align-items プロパティと同じ値を指定することます。

次の例は、各フレックス項目にいろいろな align-self の値を設定しています：

flex

flex プロパティは、同じコンテナ内の他のフレックス項目に相対的な、フレックス項目の長さを指定します。

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

その他の例

フレックスボックスでレスポンシブな web サイトを作成する
この例は、フレックスボックスによりレスポンシブな web サイトのレイアウトを作成する方法のデモです。

CSS3 フレックスボックス・プロパティ

次の表は、フレックスボックスで使われる CSS プロパティの一覧です：