Bootstrap4に用意されているクラス【flex編】

2019.06.13  2019.06.15

Bootstrap4ではフレックスボックスFlexboxが使えるようになりました。

Flex動作を有効にする

まずは、d-flexまたはd-inline-flexクラスを設定し、Flexコンテナーを作成します。

d-flex

デフォルトのFlexコンテナー
<div class="d-flex p-2 bd-highlight">デフォルトのFlexコンテナ</div>

d-inline-flex

インラインのFlexコンテナー
<div class="d-inline-flex p-2 bd-highlight">インラインのFlexコンテナ</div>

レスポンシブ対応サイズ

デフォルトFlexコンテナー インラインFlexコンテナー
全て .d-flex .d-inline-flex
576px以上 .d-sm-flex .d-sm-inline-flex
768px以上 .d-md-flex .d-md-inline-flex
992px以上 .d-lg-flex .d-lg-inline-flex
1200px以上 .d-xl-flex .d-xl-inline-flex

方向の設定(横並び、縦並び)

Flexboxの方向(横並び、縦並び)を指定します。(デフォルトflex-row

横並び flex-row、flex-row-reverse

横並びにするには .flex-rowを使用し、反対側からは .flex-row-reverse を使用します。

左から設定.flex-row
Flexアイテム1
Flexアイテム2
Flexアイテム3
右から設定.flex-row-reverse
Flexアイテム1
Flexアイテム2
Flexアイテム3
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flexアイテム1</div>
  <div class="p-2 bd-highlight">Flexアイテム2</div>
  <div class="p-2 bd-highlight">Flexアイテム3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flexアイテム1</div>
  <div class="p-2 bd-highlight">Flexアイテム2</div>
  <div class="p-2 bd-highlight">Flexアイテム3</div>
</div>

縦並び flex-column、flex-column-reverse

縦並びにするには .flex-columnを使用し、反対側からは .flex-column-reverse を使用します。

上から設定.flex-column
Flexアイテム1
Flexアイテム2
Flexアイテム3
下から設定.flex-column-reverse
Flexアイテム1
Flexアイテム2
Flexアイテム3
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flexアイテム1</div>
  <div class="p-2 bd-highlight">Flexアイテム2</div>
  <div class="p-2 bd-highlight">Flexアイテム3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flexアイテム1</div>
  <div class="p-2 bd-highlight">Flexアイテム2</div>
  <div class="p-2 bd-highlight">Flexアイテム3</div>
</div>

レスポンシブ対応サイズ

左から設定 右から設定 上から設定 下から設定
全て .flex-row .flex-row-reverse .flex-column .flex-column-reverse
576px以上 .flex-sm-row .flex-sm-row-reverse .flex-sm-column .flex-sm-column-reverse
768px以上 .flex-md-row .flex-md-row-reverse .flex-md-column .flex-md-column-reverse
992px以上 .flex-lg-row .flex-lg-row-reverse .flex-lg-column .flex-lg-column-reverse
1200px以上 .flex-xl-row .flex-xl-row-reverse .flex-xl-column .flex-xl-column-reverse

横方向の整列

justify-content-***

横方向の整列は、justify-content-***クラスのstart(デフォルト)、endcenterbetweenaroundを選択することで配置を指定することができます。

左寄せ.justify-content-start
Flexアイテム
Flexアイテム
Flexアイテム
右寄せ.justify-content-end
Flexアイテム
Flexアイテム
Flexアイテム
左右中央揃え.justify-content-center
Flexアイテム
Flexアイテム
Flexアイテム
両端から均等に並列.justify-content-between
Flexアイテム
Flexアイテム
Flexアイテム
等間隔に並列.justify-content-around
Flexアイテム
Flexアイテム
Flexアイテム
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

レスポンシブ対応サイズ

左寄せ 右寄せ 左右中央揃え 両端から均等に並列 等間隔に並列
全て .justify-content-start .justify-content-end .justify-content-center .justify-content-between .justify-content-around
576px以上 .justify-content-sm-start .justify-content-sm-end .justify-content-sm-center .justify-content-sm-between .justify-content-sm-around
768px以上 .justify-content-md-start .justify-content-md-end .justify-content-md-center .justify-content-md-between .justify-content-md-around
992px以上 .justify-content-lg-start .justify-content-lg-end .justify-content-lg-center .justify-content-lg-between .justify-content-lg-around
1200px以上 .justify-content-xl-start .justify-content-xl-end .justify-content-xl-center .justify-content-xl-between .justify-content-xl-around

縦方向の整列

align-items-***

縦方向の整列は、align-items-***クラスのstartendcenterbaselinestretch(デフォルト)を選択することで配置を指定することができます。

上揃え.align-items-start
Flexアイテム
Flexアイテム
Flexアイテム
下揃え.align-items-end
Flexアイテム
Flexアイテム
Flexアイテム
上下中央揃え.align-items-center
Flexアイテム
Flexアイテム
Flexアイテム
ベースライン揃え.align-items-baseline
Flexアイテム
Flexアイテム
Flexアイテム
コンテナいっぱいに伸ばす.align-items-stretch
Flexアイテム
Flexアイテム
Flexアイテム
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

レスポンシブ対応サイズ

上揃え 下揃え 上下中央揃え ベースライン揃え コンテナいっぱいに伸ばす
全て .align-items-start .align-items-end .align-items-center .align-items-baseline .align-items-stretch
576px以上 .align-items-sm-start .align-items-sm-end .align-items-sm-center .align-items-sm-center .align-items-sm-stretch
768px以上 .align-items-md-start .align-items-md-end .align-items-md-center .align-items-md-center .align-items-md-stretch
992px以上 .align-items-lg-start .align-items-lg-end .align-items-lg-center .align-items-lg-center .align-items-lg-stretch
1200px以上 .align-items-xl-start .align-items-xl-end .align-items-xl-center .align-items-xl-center .align-items-xl-stretch

アイテム単位の整列(縦方向)

アイテムに対してalign-self-***クラスのstartendcenterbaselinestretch(デフォルト)を選択することで、個別に整列を指定できます。

align-self-***

上揃え.align-self-start
Flexアイテム
align Flexアイテム
Flexアイテム
下揃え.align-self-end
Flexアイテム
align Flexアイテム
Flexアイテム
上下中央揃え.align-self-center
Flexアイテム
align Flexアイテム
Flexアイテム
ベースライン揃え.align-self-baseline
Flexアイテム
align Flexアイテム
Flexアイテム
コンテナいっぱいに伸ばす.align-self-stretch
Flexアイテム
align Flexアイテム
Flexアイテム
<div class="align-self-start">align flexアイテム</div>
<div class="align-self-end">align Flexアイテム</div>
<div class="align-self-center">align Flexアイテム</div>
<div class="align-self-baseline">align Flexアイテム</div>
<div class="align-self-stretch">align Flexアイテム</div>

レスポンシブ対応サイズ

上揃え 下揃え 上下中央揃え ベースライン揃え コンテナいっぱいに伸ばす
全て .align-self-start .align-self-end .align-self-center .align-self-baseline .align-self-stretch
576px以上 .align-self-sm-start .align-self-sm-end .align-self-sm-center .align-self-sm-center .align-self-sm-stretch
768px以上 .align-self-md-start .align-self-md-end .align-self-md-center .align-self-md-center .align-self-md-stretch
992px以上 .align-self-lg-start .align-self-lg-end .align-self-lg-center .align-self-lg-center .align-self-lg-stretch
1200px以上 .align-self-xl-start .align-self-xl-end .align-self-xl-center .align-self-xl-center .align-self-xl-stretch

関連記事