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

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

フレックスボックスの説明
 

合わせて読みたい記事

Bootstrap4の導入から基本的な使い方については「Bootstrap4の使い方 ブートストラップの導入方法と基本を徹底解説!」をご参照ください。

 


 

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の設定が適用されます。
 

■表示例
Bootstrap4 d-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 bootstrap.css d-flex、d-flex-inlineの設定
 

また、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以上で有効)

■上記のソースコード

<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-{方向} 主軸の向きを決定する
bootstrap4 flex-{方向} 主軸の向きを決定する
 

■表示例 flex-row(左から右へ)とflex-row-reverse(右から左へ)
Bootstrap 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-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(下から上へ)
Bootstrap 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の場合の、主軸と交差軸です。
Bootstrap 4 flexbox 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(デフォルト)の場合は、水平方向の配置を制御します。

 

■上記のソースコード

<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の場合は、主軸が垂直方向になりますので、垂直方向の配置を制御することになります。
Bootstrap 4 flexbox flex-rowの場合 主軸と交差軸
 

■表示例

 

■上記のソースコード(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}-***のように記述することができます。

クラス レスポンシブ対応クラス
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アイテムをどのように配置するかを設定できます。
 

Bootstrap4 flexbox flex-rowの場合 主軸と交差軸
 

クラス レスポンシブ対応クラス
align-items-start 交差軸の始点に配置する(デフォルト)
align-items-end 交差軸の終点に配置する
align-items-center 交差軸の中央に配置する
align-items-baseline 交差軸のベースラインに配置する
align-items-stretch 交差軸の始点から終点まで伸縮する

 
 

■主軸が水平方向(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)の場合、水平方向の交差軸に対して配置を制御します。
Bootstrap 4 flexbox flex-rowの場合 主軸と交差軸
 

■表示例

 

■上記のソースコード

<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の番号}クラスを利用して、各要素の順番を制御することができます。
 

■表示例
bootstrap4 flexアイテムでorderクラスを利用して順番を制御する
 

■上記のソースコード

<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
 

 

 

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