記事にはプロモーションが含まれる場合があります。
ここではBootstrap4系でのフレックスボックス(flex)の使い方を説明していきます。
合わせて読みたい記事
Bootstrap4の導入から基本的な使い方については「Bootstrap4の使い方 ブートストラップの導入方法と基本を徹底解説！」をご参照ください。
目次
Flexユーティリティー
Flexユーティリティーとは
Bootstrap4から新しく実装されたFlexユーティリティは、cssのflexbox（フレックスボックス）と呼ばれるレイアウトモードを使用することができるユーティリティです。従来のfloatを使ったレイアウトよりも柔軟に要素を配置することができます。
合わせて読みたい記事
Flexユーティリティーについて理解するために、先にCSSのflexbox(フレックスボックス)の概念と使い方を学習しておくことをおすすめします。
Flexユーティリティーの使い方
Flexユーティリティーを利用するためには、flexboxを利用する親要素に、d-flexクラスまたはd-inline-flex クラスを追加します。これにより、親要素がflexコンテナとなり、子要素がflexアイテムとなります。
d-flexにはdisplay:flexが、d-inline-flexにはdisplay:inline-flexの設定が適用されます。
■表示例
■上記のソースコード
|
1 2 3 4 5 6 7 |
<div class="d-flex"> <div style="background-color:pink;padding:10px;">FlexItem 1</div> <div style="background-color:orange;padding:10px;">FlexItem 2</div> <div style="background-color:purple;padding:10px;">FlexItem 3</div> <div style="background-color:skyblue;padding:10px;">FlexItem 4</div> <div style="background-color:aqua;padding:10px;">FlexItem 5</div> </div> |
■d-flexクラスと、d-flex-inlineのcss(bootstrap.css)
また、Bootstrap4ではブレークポイントに合わせてflexboxを設けることができます。
| ビューポートサイズ | 全て | 小以上 | 中以上 | 大以上 | 特大 |
|---|---|---|---|---|---|
| デフォルトのFlexコンテナ | .d-flex | .d-sm-flex | .d-md-flex | .d-lg-flex | .d-xl-flex |
| インラインFlexコンテナ | .d-inline-flex | .d-sm-inline-flex | .d-md-inline-flex | .d-lg-inline-flex | .d-xl-inline-flex |
■表示例 d-lg-flex(992px以上で有効)
■上記のソースコード
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container-fluid"> <h2>d-lg-flex(992px以上で有効)</h2> <div class="d-lg-flex"> <div style="background-color:pink;padding:10px;">FlexItem 1</div> <div style="background-color:orange;padding:10px;">FlexItem 2</div> <div style="background-color:purple;padding:10px;">FlexItem 3</div> <div style="background-color:skyblue;padding:10px;">FlexItem 4</div> <div style="background-color:aqua;padding:10px;">FlexItem 5</div> </div> </div> |
フレックスアイテムの方向設定 flex-{方向}
flex-{方向}クラス指定すると、flexコンテナの主軸の方向を指定することができます。flexアイテムはこの主軸の方向に沿って配置されます。
■flex-{方向} 主軸の向きを決定する
■表示例 flex-row(左から右へ)とflex-row-reverse(右から左へ)
■上記のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="container-fluid"> <h2 style="text-align:center">d-flex flex-row(左から右へ)</h2> <div class="d-flex flex-row"> <div style="background-color:pink;padding:10px;">FlexItem 1</div> <div style="background-color:orange;padding:10px;">FlexItem 2</div> <div style="background-color:purple;padding:10px;">FlexItem 3</div> <div style="background-color:skyblue;padding:10px;">FlexItem 4</div> <div style="background-color:aqua;padding:10px;">FlexItem 5</div> </div> <hr> <h2 style="text-align:center">d-flex flex-row-reverse(右から左へ)</h2> <div class="d-flex flex-row-reverse"> <div style="background-color:pink;padding:10px;">FlexItem 1</div> <div style="background-color:orange;padding:10px;">FlexItem 2</div> <div style="background-color:purple;padding:10px;">FlexItem 3</div> <div style="background-color:skyblue;padding:10px;">FlexItem 4</div> <div style="background-color:aqua;padding:10px;">FlexItem 5</div> </div> </div> |
なお、flex-row(デフォルト値)の場合は、省略されることも多いです。
また、ブレイクポイントに応じて、flex-{sm,mdlg,xl}-{方向}クラスも定義されています。
| クラス | レスポンシブ対応クラス | 説明 |
|---|---|---|
| (デフォルト)flex-row | flex-{sm,md,lg,xl}-row | {sm,md,lg,xl以上で}左から右に配置 |
| flex-row-reverse | flex-{sm,mdlg,xl}-row-reverse | {sm,md,lg,xl以上で}右から左に配置 |
| flex-column | flex-{sm,mdlg,xl}-column | {sm,md,lg,xl以上で}上から右に配置 |
| flex-column-reverse | flex-{sm,mdlg,xl}-column-reverse | {sm,md,lg,xl以上で}下から上に配置 |
例えば、flexコンテナにflex-md-reverse クラスを指定すると、768px以上の画面幅でflexアイテムを右から左に配置することができます。
■表示例 flex-column(上から下へ)とflex-column-reverse(下から上へ)
■上記のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="container-fluid"> <h2 style="text-align:center">d-flex flex-column(上から下へ)</h2> <div class="d-flex flex-column"> <div style="background-color:pink;padding:10px;">FlexItem 1</div> <div style="background-color:orange;padding:10px;">FlexItem 2</div> <div style="background-color:purple;padding:10px;">FlexItem 3</div> <div style="background-color:skyblue;padding:10px;">FlexItem 4</div> <div style="background-color:aqua;padding:10px;">FlexItem 5</div> </div> <hr> <h2 style="text-align:center">d-flex flex-row-reverse(下から上へ)</h2> <div class="d-flex flex-column-reverse"> <div style="background-color:pink;padding:10px;">FlexItem 1</div> <div style="background-color:orange;padding:10px;">FlexItem 2</div> <div style="background-color:purple;padding:10px;">FlexItem 3</div> <div style="background-color:skyblue;padding:10px;">FlexItem 4</div> <div style="background-color:aqua;padding:10px;">FlexItem 5</div> </div> </div> |
フレックスアイテムの主軸の配置設定 justify-content-{配置設定}
flexboxは2つの軸を持っています。主軸と、主軸に対して垂直な軸（交差軸)です。以下の図はそれぞれの始点と終点を示したものです。
以下は、水平方向flex-rowの場合の、主軸と交差軸です。
justify-content-***クラスを使用すると、flexコンテナの主軸に沿って、flexアイテムをどのように配置するかを設定できます。***には、strat（始点）、end（終点）、center（中央）、between（両はしから均等）、around（等間隔）から選択できます。
| クラス | レスポンシブ対応クラス |
|---|---|
| justify-content-start | 主軸の始点に配置する(デフォルト） |
| justify-content-end | 主軸の終点に配置する |
| justify-content-center | 主軸の中央に配置する |
| justify-content-between | 両端から均等に配置する |
| justify-content-around | 主軸に対し均等間隔に配置する |
■主軸方向がrow（デフォルト）の場合は、水平方向の配置を制御します。
■上記のソースコード
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<div class="container-fluid"> <h2>●アイテムの左寄せ justify-content-start</h2> <div class="d-flex justify-content-start"> <div style="background-color:pink;padding:10px;">FlexItem 1</div> <div style="background-color:orange;padding:10px;">FlexItem 2</div> <div style="background-color:purple;padding:10px;">FlexItem 3</div> <div style="background-color:skyblue;padding:10px;">FlexItem 4</div> <div style="background-color:aqua;padding:10px;">FlexItem 5</div> </div> <hr> <h2>●アイテムの右寄せjustify-content-end</h2> <div class="d-flex justify-content-end"> <div style="background-color:pink;padding:10px;">FlexItem 1</div> <div style="background-color:orange;padding:10px;">FlexItem 2</div> <div style="background-color:purple;padding:10px;">FlexItem 3</div> <div style="background-color:skyblue;padding:10px;">FlexItem 4</div> <div style="background-color:aqua;padding:10px;">FlexItem 5</div> </div> <hr> <h2>●アイテムの左右中央揃え justify-content-center</h2> <div class="d-flex justify-content-center"> <div style="background-color:pink;padding:10px;">FlexItem 1</div> <div style="background-color:orange;padding:10px;">FlexItem 2</div> <div style="background-color:purple;padding:10px;">FlexItem 3</div> <div style="background-color:skyblue;padding:10px;">FlexItem 4</div> <div style="background-color:aqua;padding:10px;">FlexItem 5</div> </div> <hr> <h2>●アイテムを両端から均等に並べる）justify-content-between</h2> <div class="d-flex justify-content-between"> <div style="background-color:pink;padding:10px;">FlexItem 1</div> <div style="background-color:orange;padding:10px;">FlexItem 2</div> <div style="background-color:purple;padding:10px;">FlexItem 3</div> <div style="background-color:skyblue;padding:10px;">FlexItem 4</div> <div style="background-color:aqua;padding:10px;">FlexItem 5</div> </div> <hr> <h2>●アイテムを等間隔に並べる justify-content-around</h2> <div class="d-flex justify-content-around"> <div style="background-color:pink;padding:10px;">FlexItem 1</div> <div style="background-color:orange;padding:10px;">FlexItem 2</div> <div style="background-color:purple;padding:10px;">FlexItem 3</div> <div style="background-color:skyblue;padding:10px;">FlexItem 4</div> <div style="background-color:aqua;padding:10px;">FlexItem 5</div> </div> </div> |
flex-columnの場合は、主軸が垂直方向になりますので、垂直方向の配置を制御することになります。
■表示例
■上記のソースコード(startの部分に、end、center、between、aroundなどをいれます)
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container-fluid"> <h2>垂直向きflex-columnの場合 justify-content-****(start,end,center,between,around)</h2> <div class="d-flex flex-column justify-content-start" style="height:400px;background:#aaaaaa;"> <div style="background-color:pink;padding:10px;">FlexItem 1</div> <div style="background-color:orange;padding:10px;">FlexItem 2</div> <div style="background-color:purple;padding:10px;">FlexItem 3</div> <div style="background-color:skyblue;padding:10px;">FlexItem 4</div> <div style="background-color:aqua;padding:10px;">FlexItem 5</div> </div> </div> |
ブレークポイントを設けたい場合は、justify-content-{sm|md|lg|xl}-***のように記述することができます。
| クラス | レスポンシブ対応クラス |
|---|---|
| justify-content-{sm|md|lg|xl}-start | {sm|md|lg|xl以上の場合に}主軸の始点に配置する(デフォルト） |
| justify-content-{sm|md|lg|xl}-end | {sm|md|lg|xl以上の場合に}主軸の終点に配置する |
| justify-content-{sm|md|lg|xl}-center | {sm|md|lg|xl以上の場合に}主軸の中央に配置する |
| justify-content-{sm|md|lg|xl}-between | {sm|md|lg|xl以上の場合に}両端から均等に配置する |
| justify-content-{sm|md|lg|xl}-around | {sm|md|lg|xl以上の場合に}主軸に対し均等間隔に配置する |
フレックスアイテムの交差軸の配置設定 align-items-{配置設定}
align-items-{配置設定}クラスを利用すると、flexコンテナの交差軸に沿って、flexアイテムをどのように配置するかを設定できます。
| クラス | レスポンシブ対応クラス |
|---|---|
| align-items-start | 交差軸の始点に配置する（デフォルト） |
| align-items-end | 交差軸の終点に配置する |
| align-items-center | 交差軸の中央に配置する |
| align-items-baseline | 交差軸のベースラインに配置する |
| align-items-stretch | 交差軸の始点から終点まで伸縮する |
■主軸が水平方向(flex-row)の場合、垂直方向の交差軸に対して配置を制御します。
■上記のソースコード(startの部分にend、center、baseline、stretchなどをいれます)
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container-fluid"> <h2>水平向きflex-rowの場合 align-items-***(start,end,center,baseline,start</h2> <div class="d-flex flex-row align-items-stretch" style="height:400px;background:#aaaaaa;"> <div style="background-color:pink;padding:10px;">FlexItem 1</div> <div style="background-color:orange;padding:10px;">FlexItem 2</div> <div style="background-color:purple;padding:10px;">FlexItem 3</div> <div style="background-color:skyblue;padding:10px;">FlexItem 4</div> <div style="background-color:aqua;padding:10px;">FlexItem 5</div> </div> </div> |
主軸が垂直方向(flex-column)の場合、水平方向の交差軸に対して配置を制御します。
■表示例
■上記のソースコード
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container-fluid"> <h2>垂直向きflex-columnの場合 align-items-***(start,end,center,baseline,stretch</h2> <div class="d-flex flex-column align-items-stretch" style="height:400px;background:#aaaaaa;"> <div style="background-color:pink;padding:10px;">FlexItem 1</div> <div style="background-color:orange;padding:10px;">FlexItem 2</div> <div style="background-color:purple;padding:10px;">FlexItem 3</div> <div style="background-color:skyblue;padding:10px;">FlexItem 4</div> <div style="background-color:aqua;padding:10px;">FlexItem 5</div> </div> </div> |
ブレークポイントを設けたい場合は、align-items-{sm|md|lg|xl}-***のように記述することができます。
| クラス | レスポンシブ対応クラス |
|---|---|
| align-items-{sm|md|lg|xl}-start | {sm|md|lg|xlサイズ以上の場合に}交差軸の始点に配置する（デフォルト） |
| align-items-{sm|md|lg|xl}-end | {sm|md|lg|xlサイズ以上の場合に}交差軸の終点に配置する |
| align-items-{sm|md|lg|xl}-center | {sm|md|lg|xlサイズ以上の場合に}交差軸の中央に配置する |
| align-items-{sm|md|lg|xl}-baseline | {sm|md|lg|xlサイズ以上の場合に}交差軸のベースラインに配置する |
| align-items-{sm|md|lg|xl}-stretch | {sm|md|lg|xlサイズ以上の場合に}交差軸の始点から終点まで伸縮する |
フレックスアイテムの順番を制御 Order-{番号}
flexアイテム(子要素)に対して、order-{0〜最大12の番号}クラスを利用して、各要素の順番を制御することができます。
■表示例
■上記のソースコード
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container-fluid"> <h2>フレックスアイテムの順番を決めるorder-**</h2> <div class="d-flex"> <div class="order-3" style="background-color:pink;padding:10px;">FlexItem 1(order-3)</div> <div class="order-2" style="background-color:orange;padding:10px;">FlexItem 2(order-2)</div> <div class="order-1" style="background-color:purple;padding:10px;">FlexItem 3(order-1)</div> <div class="order-5" style="background-color:skyblue;padding:10px;">FlexItem 4(order-5)</div> <div class="order-4" style="background-color:aqua;padding:10px;">FlexItem 5(order-4)</div> </div> </div> |
ブレークポイントを設けたい場合は、order-{sm|md|lg|xl}-{0〜最大12の番号}のように記述することができます。
まとめ
いかがでしたでしょうか。
今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の4のFlexユーティリティの使い方の基本をご紹介しました。
Flexユーティリティーは、flexbox(フレックスボックス)の概念と仕組みを利用したユーティリティーですので、CSSのdisplay:flexの使い方を先に学習していると理解しやすいかと思います。
ここでは割愛しますが、他にも、align-self、flex-grow(shrink)-*、flex-fill、align-content、flex-wrapなど色々な使い方があります。
公式サイトにも使い方の詳細が掲載されていますので、参考にしながら活用してみてください。
「Flex | Bootstrap」
今回は、以上になります。最後までご覧いただきありがとうございました。