Bootstrap4 Flex(フレックス)ユーティリティの使い方を徹底解説

ここではBootstrap4系でのフレックスボックス(flex)の使い方を説明していきます。
 

Flexユーティリティー

Flexユーティリティーとは

Bootstrap4から新しく実装されたFlexユーティリティは、cssのflexbox（フレックスボックス）と呼ばれるレイアウトモードを使用することができるユーティリティです。従来のfloatを使ったレイアウトよりも柔軟に要素を配置することができます。
 

合わせて読みたい記事

Flexユーティリティーについて理解するために、先にCSSのflexbox(フレックスボックス)の概念と使い方を学習しておくことをおすすめします。

●【フレックスボックス】CSS display:flexの使い方を解説

Flexユーティリティーの使い方

Flexユーティリティーを利用するためには、flexboxを利用する親要素に、d-flexクラスまたはd-inline-flex クラスを追加します。これにより、親要素がflexコンテナとなり、子要素がflexアイテムとなります。
 

d-flexにはdisplay:flexが、d-inline-flexにはdisplay:inline-flexの設定が適用されます。
 

■表示例

■上記のソースコード

<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を設けることができます。

■表示例 d-lg-flex(992px以上で有効)

■上記のソースコード

<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(右から左へ)

 

■上記のソースコード

<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コンテナにflex-md-reverse クラスを指定すると、768px以上の画面幅でflexアイテムを右から左に配置することができます。
 

■表示例 flex-column(上から下へ)とflex-column-reverse(下から上へ)

 

■上記のソースコード

<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（等間隔）から選択できます。
 

■主軸方向がrow（デフォルト）の場合は、水平方向の配置を制御します。

■上記のソースコード

<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などをいれます)

<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}-***のように記述することができます。

フレックスアイテムの交差軸の配置設定 align-items-{配置設定}

align-items-{配置設定}クラスを利用すると、flexコンテナの交差軸に沿って、flexアイテムをどのように配置するかを設定できます。
 

■主軸が水平方向(flex-row)の場合、垂直方向の交差軸に対して配置を制御します。

■上記のソースコード(startの部分にend、center、baseline、stretchなどをいれます)

<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)の場合、水平方向の交差軸に対して配置を制御します。

 

■表示例

■上記のソースコード

<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}-***のように記述することができます。

フレックスアイテムの順番を制御 Order-{番号}

flexアイテム(子要素)に対して、order-{0〜最大12の番号}クラスを利用して、各要素の順番を制御することができます。
 

■表示例

 

■上記のソースコード

<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」
 

今回は、以上になります。最後までご覧いただきありがとうございました。