SE

BootstrapでのFlexとはどのようなものなのでしょうか。

PM

Flexとは、Bootstrap4から追加されたレイアウトツールです。

BootstrapでのFlexの使い方とは？

今回は、BootstrapでのFlexの使い方について説明します。
Flexとは、Bootstrap4から追加されたレイアウトツールです。
Flexを使用することで、楽にレイアウトが作れるようになりました。

BootstrapでのFlexの使い方に興味のある方はぜひご覧ください。

基本的な使い方

BootstrapでのFlexの基本的な使い方を紹介します。
div要素などに.d-flexを付与することでFlexコンテナを作成することができます。

See the Pen
bootstrap_flex1 by kskumd (@kskumd)
on CodePen.

方向

BootstrapでのFlexでは、方向を指定できます。

See the Pen
bootstrap_flex2 by kskumd (@kskumd)
on CodePen.

配置設定

BootstrapでのFlexでは、justify-contentを指定することで配置設定ができます。
start , end, center, between, around を指定できます。

See the Pen
bootstrap_flex3 by kskumd (@kskumd)
on CodePen.

占有

BootstrapでのFlexでは、flex-fillを指定することで水平スペースを占有して配置できます。

See the Pen
bootstrap_flex4 by kskumd (@kskumd)
on CodePen.

伸縮

BootstrapでのFlexでは、flex-growを指定することでアイテムを伸縮して配置できます。

See the Pen
bootstrap_flex5 by kskumd (@kskumd)
on CodePen.

item 1は使用可能なすべてのスペースを使用し、残りのアイテムは最小限のスペースを使用します。

SE

BootstrapでのFlexの使い方がよく理解できました。

PM

Flexを使用することでレイアウトが楽になります。実践で使用してみましょう。

まとめ

いかがでしたでしょうか。
BootstrapでのFlexの使い方について説明しました。
Flexとは、Bootstrap4から追加されたレイアウトツールです。
Flexを使用することで、楽にレイアウトが作れるようになりました。

ぜひご自身でソースコードを書いて、理解を深めてください。