CSS3から利用可能になったFlexboxプロパティを、クラス指定することで利用することができます。
Flexboxプロパティが分からない方はCPIブログでもFlexboxを紹介していますので是非参照してください。

Flexboxの指定

Flexboxの指定は親のボックスに.d-flexか、.d-inline-flexを指定します。
また特定サイズのみFlexboxを指定したい場合は下記の通り、サイズを指定することも可能です。

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex

例：

<div class="d-flex">
  <div>コンテンツ１</div>
  <div>コンテンツ２</div>
</div>

結果：

Flexboxの向き

Flexboxの向きを指定します。

例：

• .flex-row：（デフォルト）左寄せの
• .flex-row-reverse：右寄せで右からコンテンツを並べる
• .flex-column：縦並び
• .flex-column-reverse：縦並びのコンテンツを下から並べる

例：

<div class="d-flex flex-row-reverse">
  <div>コンテンツ１</div>
  <div>コンテンツ２</div>
</div>

結果：

水平の横並び位置

親のボックスに対して下記クラスを指定すると水平方向の位置を指定することができます。

• .justify-content-start：（デフォルト）左寄せ
• .justify-content-end：右寄せ
• .justify-content-center：中央寄せ
• .justify-content-between：均等割
• .justify-content-around：左右に余白を空け均等割

例：

<div class="d-flex justify-content-around">
  <div>コンテンツ１</div>
  <div>コンテンツ２</div>
  <div>コンテンツ３</div>
</div>

結果：

また特定のサイズにクラスを指定することも可能です。

• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

縦方向の位置

親ボックスに対して下記クラスを追加することで縦方向の位置を指定することができます。

• .align-items-start：上寄せ
• .align-items-end：下寄せ
• .align-items-center：中央寄せ
• .align-items-baseline：ベースラインに合わせる
• .align-items-stretch：（デフォルト）高さにボックスを伸ばす

例：center

<div class="d-flex align-items-center">
  <div>あああ</div>
  <div>あああ</div>
  <div>あああ</div>
</div>

結果：

例：baseline

<div class="d-flex align-items-baseline">
  <div><h1>あああ</h1></div>
  <div><p>あああ</p></div>
  <div><h4>あああ</h4></div>
</div>

結果：

また特定のサイズのみにクラスを指定することも可能です。

• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch

アイテム単位の縦方向位置

子ボックスに対して下記クラスを追加することで縦方向の位置をアイテム単位で指定することができます。

• .align-self-start：上寄せ
• .align-self-end：下寄せ
• .align-self-center：中央寄せ
• .align-self-baseline：ベースラインに揃える
• .align-self-stretch：（デフォルト）高さに合わせてアイテムをストレッチ

例：

<div class="d-flex"">
  <div>あああ</div>
  <div class="align-self-center">あああ</div>
  <div>あああ</div>
</div>

結果：

また特定のサイズのみにクラスを指定することも可能です。

• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• .align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch

折り返し

各アイテムの合計幅より画面幅が小さくなった場合の折り返し指定です。

• .flex-nowrap：（デフォルト）折り返ししない
• .flex-wrap：折り返す
• .flex-wrap-reverse：折り返した場合上下逆に並べる

例：

<div class="d-flex flex-wrap">
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
</div>

結果：

また特定のサイズのみにクラスを指定することも可能です。

• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse

並び順

各アイテムが、数値が小さい順に並び変わります。

• .order-0
• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .order-6
• .order-7
• .order-8
• .order-9
• .order-10
• .order-11
• .order-12

例：

<div class="d-flex">
  <div class="order-2">コンテンツ１</div>
  <div class="order-1">コンテンツ２</div>
  <div class="order-3">コンテンツ３</div>
</div>

結果：

また特定のサイズのみにクラスを指定することも可能です。

• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-sm-6
• .order-sm-7
• .order-sm-8
• .order-sm-9
• .order-sm-10
• .order-sm-11
• .order-sm-12
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-md-6
• .order-md-7
• .order-md-8
• .order-md-9
• .order-md-10
• .order-md-11
• .order-md-12
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-lg-6
• .order-lg-7
• .order-lg-8
• .order-lg-9
• .order-lg-10
• .order-lg-11
• .order-lg-12
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xl-6
• .order-xl-7
• .order-xl-8
• .order-xl-9
• .order-xl-10
• .order-xl-11
• .order-xl-12

折り返し時の縦方向の位置

.flex-wrapを指定したときで、折り返し時の縦方向の位置を指定することができます。

• .align-content-start：（デフォルト）上寄せ
• .align-content-end：下寄せ
• .align-content-center：中央寄せ
• .align-content-around：均等割
• .align-content-stretch：高さに合わせてストレッチ

例：

<div class="d-flex flex-wrap align-content-around">
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
  <div>コンテンツ</div>
</div>

結果：