フレックス

レスポンシブフレックスボックスユーティリティの完全なスイートで、グリッドのカラム、ナビゲーション、コンポーネントなどのレイアウト、配置、サイズを素早く管理できます。より複雑な実装には、カスタムCSSが必要な場合があります。

Enable flex behaviors

display クラスを適用して flexbox コンテナを作成し, 直下の子要素 を flex アイテムに変換します。

Flex コンテナとアイテムは, フレックスプロパティを追加することでさらに変更することができます。

display="flexとdisplay="inline-flexのレスポンシブバリエーションも存在します。

• display="flex"
• display="inline-flex"
• display="sm-flex"
• display="sm-inline-flex"
• display="md-flex"
• display="md-inline-flex"
• display="lg-flex"
• display="lg-inline-flex"
• display="xl-flex"
• display="xl-inline-flex"
• display="xxl-flex"
• display="xxl-inline-flex"

Direction

direction utilities を使って Flex アイテムの向きを設定します。ほとんどのブラウザでデフォルトは row なので, ここでは水平クラスを省略できます。

しかし, この値を明示的に設定する必要があるかもしれません(レスポンシブレイアウトで切り替える場合など)。

水平方向(デフォルト)を設定するには flex-direction="flex-row", 反対側から水平方向を開始するには flex-direction="row-reverse" を使用します。

垂直方向を設定するには flex-direction="column", 下から開始するには flex-direction="column-reverse" を使用します。

flex-direction にもレスポンシブユーティリティがあります。

Justify content

justify-content 属性を使用して, Flex アイテムの主軸(flex-direction: column の場合は x 軸を始点とし, y 軸)上の配置を変更します。

start (デフォルト), end, center, between, around, evenly から選択できます。

justify-content にもレスポンシブユーティリティがあります。

Align items

align-items 属性を使用して, Flex アイテムのクロス軸(flex-direction: column の場合は x 軸を始点とし, y 軸)上の配置を変更します。

start, end, center, baseline, stretch (デフォルト) から選択できます。

align-items にもレスポンシブユーティリティがあります。

Align self

align-self 属性を使用して, Flex アイテムのクロス軸(flex-direction: column の場合は x 軸を始点とし, y 軸)上の配置を個別に変更します。

start, end, center, baseline, stretch (デフォルト) から選択できます。

align-self にもレスポンシブ utilities があります。

• align-self="start"
• align-self="end"
• align-self="center"
• align-self="baseline"
• align-self="stretch"
• align-self="sm-start"
• align-self="sm-end"
• align-self="sm-center"
• align-self="sm-baseline"
• align-self="sm-stretch"
• align-self="md-start"
• align-self="md-end"
• align-self="md-center"
• align-self="md-baseline"
• align-self="md-stretch"
• align-self="lg-start"
• align-self="lg-end"
• align-self="lg-center"
• align-self="lg-baseline"
• align-self="lg-stretch"
• align-self="xl-start"
• align-self="xl-end"
• align-self="xl-center"
• align-self="xl-baseline"
• align-self="xl-stretch"
• align-self="xxl-start"
• align-self="xxl-end"
• align-self="xxl-center"
• align-self="xxl-baseline"
• align-self="xxl-stretch"

Fill

兄弟要素に flex-fill を適用すると, 利用可能な水平スペースをすべて使って, それらの要素をコンテンツと同じ幅(コンテンツがボーダーボックスを超えていない場合は同じ幅)に強制的に配置します。

flex-fill にもレスポンシブ utilities があります。

• flex="fill"
• flex="sm-fill"
• flex="md-fill"
• flex="lg-fill"
• flex="xl-fill"
• flex="xxl-fill"

Grow and shrink

flex-grow-* 属性を使うと, Flex アイテムが利用可能なスペースを埋めるように伸長するかどうかを切り替えることができます。

下の例では, flex-grow="1" 要素は利用可能なスペースをすべて使い, 残りの 2 つの Flex アイテムは必要なスペースを確保しています。

必要に応じて Flex アイテムの縮小を切り替えるには flex-shrink 属性を利用します。

下の例では, flex-shrink="1" を指定した2番目の Flex アイテムは, width="100" を指定した前の Flex アイテムのためのスペースを確保するために “縮小” して内容を改行するように強制されています。

flex-grow, flex-shrink にもレスポンシブユーティリティがあります。

Auto margins

Flexbox は, Flex の配置と auto margin を組み合わせると非常に便利です。

以下に示すのは, auto margin でFlex アイテムを制御する 3つの例です: デフォルト(auto margin なし), 2 アイテムを右寄せ (margin="e-auto"), 2 アイテムを左寄せ (margin="s-auto")。

With align-items

align-items, flex-direction="column", margin="t-auto", margin="b-auto" を組み合わせて, Flex アイテムをコンテナの上部または下部に垂直に配置できます。

Wrap

Flex アイテムの折り返しを変更します。デフォルトは flex-wrap="nowrap" で全く折り返しなし, flex-wrap="wrap" で折り返し, flex-wrap="wrap-reverse" で逆方向でかつ折り返しを設定できます。

flex-warp にもレスポンシブ utilities があります。

Order

flex-order 属性で Flex アイテムの見栄え上の順番を変更します。

アイテムを最初か最後にするオプションと, DOM の順序を使用するためのリセットのみを提供しています。

flex-order は 0 から 5 までの任意の整数値を取るので, 必要に応じてカスタム CSS を追加してください。

flex-order にもレスポンシブ utilities があります。

• flex-order="0"
• flex-order="1"
• flex-order="2"
• flex-order="3"
• flex-order="4"
• flex-order="5"
• flex-order="sm-0"
• flex-order="sm-1"
• flex-order="sm-2"
• flex-order="sm-3"
• flex-order="sm-4"
• flex-order="sm-5"
• flex-order="md-0"
• flex-order="md-1"
• flex-order="md-2"
• flex-order="md-3"
• flex-order="md-4"
• flex-order="md-5"
• flex-order="lg-0"
• flex-order="lg-1"
• flex-order="lg-2"
• flex-order="lg-3"
• flex-order="lg-4"
• flex-order="lg-5"
• flex-order="xl-0"
• flex-order="xl-1"
• flex-order="xl-2"
• flex-order="xl-3"
• flex-order="xl-4"
• flex-order="xl-5"
• flex-order="xxl-0"
• flex-order="xxl-1"
• flex-order="xxl-2"
• flex-order="xxl-3"
• flex-order="xxl-4"
• flex-order="xxl-5"

さらに, レスポンシブな flex-order="first" と flex-order="last" クラスもあり, それぞれ flex-order="-1" と flex-order="6" を適用して要素の flex-order を変更します。

• flex-order="first"
• flex-order="last"
• flex-order="sm-first"
• flex-order="sm-last"
• flex-order="md-first"
• flex-order="md-last"
• flex-order="lg-first"
• flex-order="lg-last"
• flex-order="xl-first"
• flex-order="xl-last"
• flex-order="xxl-first"
• flex-order="xxl-last"

Align content

Flex コンテナ上のalign-content 属性を使用して, Flex アイテムをクロス軸上に全体的に揃えることができます。

start (デフォルト), end, center, between, around, stretch から選択します。

ここでは, デモのために flex-wrap="wrap" を指定し Flex アイテムの数を増やしています。

注意 このプロパティは, Flex アイテムの単一行には影響しません。

align-content にもレスポンシブ utilities があります。

• align-content="start"
• align-content="end"
• align-content="center"
• align-content="around"
• align-content="stretch"
• align-content="sm-start"
• align-content="sm-end"
• align-content="sm-center"
• align-content="sm-around"
• align-content="sm-stretch"
• align-content="md-start"
• align-content="md-end"
• align-content="md-center"
• align-content="md-around"
• align-content="md-stretch"
• align-content="lg-start"
• align-content="lg-end"
• align-content="lg-center"
• align-content="lg-around"
• align-content="lg-stretch"
• align-content="xl-start"
• align-content="xl-end"
• align-content="xl-center"
• align-content="xl-around"
• align-content="xl-stretch"
• align-content="xxl-start"
• align-content="xxl-end"
• align-content="xxl-center"
• align-content="xxl-around"
• align-content="xxl-stretch"

Media object

This is some content from a media component. You can replace this with any content and adjust it as needed.

vue

画像の横にあるコンテンツを垂直方向に中央に配置したい場合

This is some content from a media component. You can replace this with any content and adjust it as needed.

vue