レスポンシブフレックスボックスユーティリティの完全なスイートで、グリッドのカラム、ナビゲーション、コンポーネントなどのレイアウト、配置、サイズを素早く管理できます。より複雑な実装には、カスタムCSSが必要な場合があります。
Enable flex behaviors
display クラスを適用して flexbox コンテナを作成し, 直下の子要素 を flex アイテムに変換します。
Flex コンテナとアイテムは, フレックスプロパティを追加することでさらに変更することができます。
I'm a flexbox container!
vue
<template>
<b-div
flex
padding="2"
>
I'm a flexbox container!
</b-div>
</template>
I'm an inline flexbox container!
vue
<template>
<b-div
flex="inline"
padding="2"
>
I'm an inline flexbox container!
</b-div>
</template>
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 item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
vue
<template>
<b-div
flex
margin="y-4"
flex-direction="row"
>
<b-div padding="2">
Flex item 1
</b-div>
<b-div padding="2">
Flex item 2
</b-div>
<b-div padding="2">
Flex item 3
</b-div>
</b-div>
<b-div
flex
margin="y-4"
flex-direction="row-reverse"
>
<b-div padding="2">
Flex item 1
</b-div>
<b-div padding="2">
Flex item 2
</b-div>
<b-div padding="2">
Flex item 3
</b-div>
</b-div>
</template>
垂直方向を設定するには flex-direction="column", 下から開始するには flex-direction="column-reverse" を使用します。
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
vue
<template>
<b-div
flex
margin="y-4"
flex-direction="column"
>
<b-div padding="2">
Flex item 1
</b-div>
<b-div padding="2">
Flex item 2
</b-div>
<b-div padding="2">
Flex item 3
</b-div>
</b-div>
<b-div
flex
margin="y-4"
flex-direction="column-reverse"
>
<b-div padding="2">
Flex item 1
</b-div>
<b-div padding="2">
Flex item 2
</b-div>
<b-div padding="2">
Flex item 3
</b-div>
</b-div>
</template>
flex-direction にもレスポンシブユーティリティがあります。
Justify content
justify-content 属性を使用して, Flex アイテムの主軸(flex-direction: column の場合は x 軸を始点とし, y 軸)上の配置を変更します。
start (デフォルト), end, center, between, around, evenly から選択できます。
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
vue
<template>
<b-div
flex
margin="4"
justify-content="start"
>
<b-div padding="2">
Flex item 1
</b-div>
<b-div padding="2">
Flex item 2
</b-div>
<b-div padding="2">
Flex item 3
</b-div>
</b-div>
<b-div
flex
margin="4"
justify-content="end"
>
<b-div padding="2">
Flex item 1
</b-div>
<b-div padding="2">
Flex item 2
</b-div>
<b-div padding="2">
Flex item 3
</b-div>
</b-div>
<b-div
flex
margin="4"
justify-content="center"
>
<b-div padding="2">
Flex item 1
</b-div>
<b-div padding="2">
Flex item 2
</b-div>
<b-div padding="2">
Flex item 3
</b-div>
</b-div>
<b-div
flex
margin="4"
justify-content="between"
>
<b-div padding="2">
Flex item 1
</b-div>
<b-div padding="2">
Flex item 2
</b-div>
<b-div padding="2">
Flex item 3
</b-div>
</b-div>
<b-div
flex
margin="4"
justify-content="around"
>
<b-div padding="2">
Flex item 1
</b-div>
<b-div padding="2">
Flex item 2
</b-div>
<b-div padding="2">
Flex item 3
</b-div>
</b-div>
<b-div
flex
margin="4"
justify-content="evenly"
>
<b-div padding="2">
Flex item 1
</b-div>
<b-div padding="2">
Flex item 2
</b-div>
<b-div padding="2">
Flex item 3
</b-div>
</b-div>
</template>
justify-content にもレスポンシブユーティリティがあります。
Align items
align-items 属性を使用して, Flex アイテムのクロス軸(flex-direction: column の場合は x 軸を始点とし, y 軸)上の配置を変更します。
start, end, center, baseline, stretch (デフォルト) から選択できます。
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
vue
<template>
<b-div
flex
align-items="start"
margin="b-3"
style="height: 100px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
<b-div
flex
align-items="end"
margin="b-3"
style="height: 100px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
<b-div
flex
align-items="center"
margin="b-3"
style="height: 100px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
<b-div
flex
align-items="baseline"
margin="b-3"
style="height: 100px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
<b-div
flex
align-items="stretch"
margin="b-3"
style="height: 100px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
</template>
align-items にもレスポンシブユーティリティがあります。
align-items="start"align-items="end"align-items="center"align-items="baseline"align-items="stretch"align-items="sm-start"align-items="sm-end"align-items="sm-center"align-items="sm-baseline"align-items="sm-stretch"align-items="md-start"align-items="md-end"align-items="md-center"align-items="md-baseline"align-items="md-stretch"align-items="lg-start"align-items="lg-end"align-items="lg-center"align-items="lg-baseline"align-items="lg-stretch"align-items="xl-start"align-items="xl-end"align-items="xl-center"align-items="xl-baseline"align-items="xl-stretch"align-items="xxl-start"align-items="xxl-end"align-items="xxl-center"align-items="xxl-baseline"align-items="xxl-stretch"
vue
Align self
align-self 属性を使用して, Flex アイテムのクロス軸(flex-direction: column の場合は x 軸を始点とし, y 軸)上の配置を個別に変更します。
start, end, center, baseline, stretch (デフォルト) から選択できます。
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
vue
<template>
<b-div
flex
margin="b-3"
style="height: 100px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div
align-self="start"
padding="2"
>
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
<b-div
flex
margin="b-3"
style="height: 100px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div
align-self="end"
padding="2"
>
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
<b-div
flex
margin="b-3"
style="height: 100px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div
align-self="center"
padding="2"
>
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
<b-div
flex
margin="b-3"
style="height: 100px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div
align-self="baseline"
padding="2"
>
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
<b-div
flex
margin="b-3"
style="height: 100px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div
align-self="stretch"
padding="2"
>
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
</template>
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 item with a lot of content
Flex item
Flex item
vue
<template>
<b-div
flex
border-color="highlight"
>
<b-div
flex-fill
padding="2"
border-color="highlight"
>
Flex item with a lot of content
</b-div>
<b-div
flex-fill
padding="2"
border-color="highlight"
>
Flex item
</b-div>
<b-div
flex-fill
padding="2"
border-color="highlight"
>
Flex item
</b-div>
</b-div>
</template>
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 item
Flex item
Third flex item
vue
<template>
<b-div flex>
<b-div
:padding="2"
flex-grow="1"
>
Flex item
</b-div>
<b-div :padding="2">
Flex item
</b-div>
<b-div :padding="2">
Third flex item
</b-div>
</b-div>
</template>
必要に応じて Flex アイテムの縮小を切り替えるには flex-shrink 属性を利用します。
下の例では, flex-shrink="1" を指定した2番目の Flex アイテムは, width="100" を指定した前の Flex アイテムのためのスペースを確保するために “縮小” して内容を改行するように強制されています。
Flex item
Flex item
vue
<template>
<b-div flex>
<b-div
padding="2"
relative-width="100"
>
Flex item
</b-div>
<b-div
padding="2"
flex-shrink="1"
>
Flex item
</b-div>
</b-div>
</template>
flex-grow, flex-shrink にもレスポンシブユーティリティがあります。
Flex item
Flex item
vue
<template>
<b-div flex>
<b-div
padding="2"
relative-width="100"
>
Flex item
</b-div>
<b-div
padding="2"
flex-shrink="1"
>
Flex item
</b-div>
</b-div>
</template>
Auto margins
Flexbox は, Flex の配置と auto margin を組み合わせると非常に便利です。
以下に示すのは, auto margin でFlex アイテムを制御する 3つの例です: デフォルト(auto margin なし), 2 アイテムを右寄せ (margin="e-auto"), 2 アイテムを左寄せ (margin="s-auto")。
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
vue
<template>
<b-div
flex
margin="b-3"
style="height: 100px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
<b-div
flex
margin="b-3"
style="height: 100px"
>
<b-div
margin="e-auto"
padding="2"
>
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
<b-div
flex
margin="b-3"
style="height: 100px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div
margin="s-auto"
padding="2"
>
Flex item
</b-div>
</b-div>
</template>
With align-items
align-items, flex-direction="column", margin="t-auto", margin="b-auto" を組み合わせて, Flex アイテムをコンテナの上部または下部に垂直に配置できます。
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
vue
<template>
<b-div
flex
align-items="start"
flex-direction="column"
margin="b-3"
style="height: 200px"
>
<b-div
margin="Anchoruto"
:padding="2"
>
Flex item
</b-div>
<b-div :padding="2">
Flex item
</b-div>
<b-div :padding="2">
Flex item
</b-div>
</b-div>
<b-div
flex
align-items="end"
flex-direction="column"
margin="b-3"
style="height: 200px"
>
<b-div :padding="2">
Flex item
</b-div>
<b-div :padding="2">
Flex item
</b-div>
<b-div
margin="t-auto"
:padding="2"
>
Flex item
</b-div>
</b-div>
</template>
Wrap
Flex アイテムの折り返しを変更します。デフォルトは flex-wrap="nowrap" で全く折り返しなし, flex-wrap="wrap" で折り返し, flex-wrap="wrap-reverse" で逆方向でかつ折り返しを設定できます。
Flex item
Flex item
Flex item
Flex item
Flex item
vue
<template>
<b-div
flex
flex-wrap="nowrap"
style="width: 8rem"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
</template>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
vue
<template>
<b-div
flex
flex-wrap="wrap"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
</template>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
vue
<template>
<b-div>
<b-div
flex
flex-wrap="wrap-reverse"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
</b-div>
</template>
flex-warp にもレスポンシブ utilities があります。
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
vue
<template>
<b-div>
<b-div
flex
flex-wrap="wrap-reverse"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
</b-div>
</template>
Order
flex-order 属性で Flex アイテムの見栄え上の順番を変更します。
アイテムを最初か最後にするオプションと, DOM の順序を使用するためのリセットのみを提供しています。
flex-order は 0 から 5 までの任意の整数値を取るので, 必要に応じてカスタム CSS を追加してください。
First flex item
Second flex item
Third flex item
vue
<template>
<b-div
flex
flex-wrap="nowrap"
>
<b-div
flex-order="3"
padding="2"
>
First flex item
</b-div>
<b-div
flex-order="2"
padding="2"
>
Second flex item
</b-div>
<b-div
flex-order="1"
padding="2"
>
Third flex item
</b-div>
</b-div>
</template>
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 アイテムの単一行には影響しません。
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
vue
<template>
<b-div
flex
align-content="start"
flex-wrap="wrap"
margin="b-3"
style="height: 200px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
</template>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
vue
<template>
<b-div
flex
align-content="end"
flex-wrap="wrap"
margin="b-3"
style="height: 200px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
</template>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
vue
<template>
<b-div
flex
align-content="center"
flex-wrap="wrap"
margin="b-3"
style="height: 200px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
</template>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
vue
<template>
<b-div
flex
align-content="between"
flex-wrap="wrap"
margin="b-3"
style="height: 200px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
</template>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
vue
<template>
<b-div
flex
align-content="around"
flex-wrap="wrap"
margin="b-3"
style="height: 200px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
</template>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
vue
<template>
<b-div
flex
align-content="stretch"
flex-wrap="wrap"
margin="b-3"
style="height: 200px"
>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
<b-div padding="2">
Flex item
</b-div>
</b-div>
</template>
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
<template>
<b-div flex>
<b-div flex-shrink="0">
<b-img
src="https://dummyimage.com/100x100/e5e5e5/999&text=image"
fluid
alt="Card image cap"
/>
</b-div>
<b-div
flex-grow="1"
margin="s-3"
>
This is some content from a media component. You can replace this with any
content and adjust it as needed.
</b-div>
</b-div>
</template>
画像の横にあるコンテンツを垂直方向に中央に配置したい場合
This is some content from a media component. You can replace this with any content and adjust it as needed.
vue
<template>
<b-div
flex
align-items="center"
>
<b-div flex-shrink="0">
<b-img
src="https://dummyimage.com/100x100/e5e5e5/999&text=image"
fluid
alt="Card image cap"
/>
</b-div>
<b-div
flex-grow="1"
margin="s-3"
>
This is some content from a media component. You can replace this with any
content and adjust it as needed.
</b-div>
</b-div>
</template>
Flex Component
<b-div flex /> のショートカットとして <Flex /> を使用することもできます。
I'm an inline flexbox container!
vue
<template>
<Flex padding="2">
I'm an inline flexbox container!
</Flex>
</template>
属性の flex- プリフィックスは省略できます。
構造をよりわかりやくすするために<FlexItem /> コンポーネントも利用できます。
Examples
FlexIconBlock
Contact Support
Reach out to our support team for assistance with your inquiries.
vue
<template>
<Flex>
<FlexItem padding="3">
<BIcon
icon="bi:chat-left-text"
display-headings="5"
text-color="primary"
/>
</FlexItem>
<FlexItem grow="1">
<b-p headings="4">Contact Support</b-p>
<b-p text-color="secondary">
Reach out to our support team for assistance with your inquiries.
</b-p>
</FlexItem>
</Flex>
</template>