.net column

.NET開発者のためのブログメディア
開発環境

Bootstrap Flexの使い方を紹介!|

2020年12月02日

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を使用することで、楽にレイアウトが作れるようになりました。

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)