Bootstrap Flexの使い方を紹介！｜
目次
BootstrapでのFlexの使い方とは？
今回は、BootstrapでのFlexの使い方について説明します。
Flexとは、Bootstrap4から追加されたレイアウトツールです。
Flexを使用することで、楽にレイアウトが作れるようになりました。
BootstrapでのFlexの使い方に興味のある方はぜひご覧ください。
基本的な使い方
BootstrapでのFlexの基本的な使い方を紹介します。
div要素などに.d-flexを付与することでFlexコンテナを作成することができます。
|
1 2 3 4 5 6 7 |
<div class="d-flex"> <div style="background-color:lightblue;padding:10px;">Flex item 1</div> <div style="background-color:lightblue;padding:10px;">Flex item 2</div> <div style="background-color:lightblue;padding:10px;">Flex item 3</div> <div style="background-color:lightblue;padding:10px;">Flex item 4</div> <div style="background-color:lightblue;padding:10px;">Flex item 5</div> </div> |
See the Pen
bootstrap_flex1 by kskumd (@kskumd)
on CodePen.
方向
BootstrapでのFlexでは、方向を指定できます。
|
1 2 3 4 |
.flex-row : 左から右方向 .flex-row-reverse : 右から左方向 .flex-column : 上から下方向 .flex-column-reverse : 下から上方向 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="d-flex flex-row"> <div style="background-color:lightblue;padding:10px;">Flex item 1</div> <div style="background-color:lightblue;padding:10px;">Flex item 2</div> <div style="background-color:lightblue;padding:10px;">Flex item 3</div> </div><br> <div class="d-flex flex-row-reverse"> <div style="background-color:lightblue;padding:10px;">Flex item 1</div> <div style="background-color:lightblue;padding:10px;">Flex item 2</div> <div style="background-color:lightblue;padding:10px;">Flex item 3</div> </div><br> <div class="d-flex flex-column"> <div style="background-color:lightblue;padding:10px;">Flex item 1</div> <div style="background-color:lightblue;padding:10px;">Flex item 2</div> <div style="background-color:lightblue;padding:10px;">Flex item 3</div> </div><br> <div class="d-flex flex-column-reverse"> <div style="background-color:lightblue;padding:10px;">Flex item 1</div> <div style="background-color:lightblue;padding:10px;">Flex item 2</div> <div style="background-color:lightblue;padding:10px;">Flex item 3</div> </div> |
See the Pen
bootstrap_flex2 by kskumd (@kskumd)
on CodePen.
配置設定
BootstrapでのFlexでは、justify-contentを指定することで配置設定ができます。
start , end, center, between, around を指定できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div class="d-flex justify-content-start"> <div style="background-color:lightblue;padding:10px;">Flex item 1</div> <div style="background-color:lightblue;padding:10px;">Flex item 2</div> <div style="background-color:lightblue;padding:10px;">Flex item 3</div> </div><br> <div class="d-flex justify-content-end"> <div style="background-color:lightblue;padding:10px;">Flex item 1</div> <div style="background-color:lightblue;padding:10px;">Flex item 2</div> <div style="background-color:lightblue;padding:10px;">Flex item 3</div> </div><br> <div class="d-flex justify-content-center"> <div style="background-color:lightblue;padding:10px;">Flex item 1</div> <div style="background-color:lightblue;padding:10px;">Flex item 2</div> <div style="background-color:lightblue;padding:10px;">Flex item 3</div> </div><br> <div class="d-flex justify-content-between"> <div style="background-color:lightblue;padding:10px;">Flex item 1</div> <div style="background-color:lightblue;padding:10px;">Flex item 2</div> <div style="background-color:lightblue;padding:10px;">Flex item 3</div> </div><br> <div class="d-flex justify-content-around"> <div style="background-color:lightblue;padding:10px;">Flex item 1</div> <div style="background-color:lightblue;padding:10px;">Flex item 2</div> <div style="background-color:lightblue;padding:10px;">Flex item 3</div> </div> |
See the Pen
bootstrap_flex3 by kskumd (@kskumd)
on CodePen.
占有
BootstrapでのFlexでは、flex-fillを指定することで水平スペースを占有して配置できます。
|
1 2 3 4 5 |
<div class="d-flex"> <div style="background-color:lightblue;padding:10px;" class="p-2 flex-fill">Flex item 1</div> <div style="background-color:lightblue;padding:10px;" class="p-2 flex-fill">Flex item 2</div> <div style="background-color:lightblue;padding:10px;" class="p-2 flex-fill">Flex item 3</div> </div> |
See the Pen
bootstrap_flex4 by kskumd (@kskumd)
on CodePen.
伸縮
BootstrapでのFlexでは、flex-growを指定することでアイテムを伸縮して配置できます。
|
1 2 3 4 5 |
<div class="d-flex"> <div style="background-color:lightblue;padding:10px;" class="p-2 flex-grow-1">Flex item 1</div> <div style="background-color:lightblue;padding:10px;">Flex item 2</div> <div style="background-color:lightblue;padding:10px;">Flex item 3</div> </div> |
See the Pen
bootstrap_flex5 by kskumd (@kskumd)
on CodePen.
item 1は使用可能なすべてのスペースを使用し、残りのアイテムは最小限のスペースを使用します。
まとめ
いかがでしたでしょうか。
BootstrapでのFlexの使い方について説明しました。
Flexとは、Bootstrap4から追加されたレイアウトツールです。
Flexを使用することで、楽にレイアウトが作れるようになりました。
ぜひご自身でソースコードを書いて、理解を深めてください。
