Bootstrap4ではclass="row"に対してdisplay:flex;が初期設定として指定されているためflexboxコンテナとして使うことができます。つまり、この要素の中に入るcol-系クラスの要素たちはflexアイテムとして配置を指定することができるということです。
※Flexboxのことを知らない方はまずは、下記をご覧いただくと良いと思います。
ここでは、Bootstrap4でFlexboxを使いこなすために必要なクラス名一覧をご紹介していきます。
コンテンツ
Bootstrap4で使えるFlexbox系クラス名一覧
flexboxコンテナ（class="row"のところ）に入れるクラス一覧
| プロパティ（説明） | 値 | flexアイテムの配置 | Bootstrap4のクラス名 |
|---|---|---|---|
| flex-direction（配置する方向） | row | 左から右へ | flex-row |
| row-reverse | 右から左へ | flex-row-reverse | |
| column | 上から下へ | flex-column | |
| column-reverse | 下から上へ | flex-column-reverse | |
| flex-wrap（改行の方向） | nowrap | 改行しない | flex-nowrap |
| wrap | 改行する | flex-wrap | |
| wrap-reverse | 下から上に改行 | flex-wrap-reverse | |
| justify-content（ヨコの配置） | flex-start | 左寄せ | justify-content-start |
| flex-end | 右寄せ | justify-content-end | |
| flex-center | 中央寄せ | justify-content-center | |
| space-between | 均等割り付け | justify-content-between | |
| space-around | 等間隔の余白 | justify-content-around | |
| align-items （タテの配置） |
stretch | 隙間なく配置 | align-items-stretch |
| flex-start | 上寄せ | align-items-start | |
| flex-end | 下寄せ | align-items-end | |
| center | 中央寄せ | align-items-center | |
| baseline | ベースライン揃え | align-items-baseline | |
| align-content （行の配置） |
stretch | 隙間なく配置 | align-content-stretch |
| flex-start | 上寄せ | align-content-start | |
| flex-end | 下寄せ | align-content-end | |
| flex-center | 中央寄せ | align-content-end | |
| space-between | 均等割り付け | align-content-between | |
| space-around | 等間隔の余白 | align-content-around |
flexアイテム（col-系要素）に入れるクラス一覧
| プロパティ （説明） |
値 | flexアイテムの配置 | Bootstrap4のクラス名 |
|---|---|---|---|
| align-self （タテの配置） |
auto | 親要素のalign-itemsの値に従う | align-self-auto |
| flex-start | 上寄せ | align-self-start | |
| flex-end | 下寄せ | align-self-end | |
| center | 中央寄せ | align-self-center | |
| baseline | ベースライン？ | align-self-baseline | |
| stretch | 隙間なく配置 | align-self-stretch |
実際にどのような配置になるのか、実例と共に見ていきましょう。
まずは、基本となるグリッドシステムがこちらです。
ボタンで表示を切り替えてご覧ください。
See the Pen bootstrap4 Flexbox by kenichi (@ken81) on CodePen.
Bootstrap4のグリッドシステムの基本となる要素container-fluid, row, col-のクラスが追加されているだけの何の変哲もないコードです。ここから先のサンプルでは、それぞれBootstrap4のクラス名を入れたときのレイアウトです。
配置する方向を決めるflex-directionプロパティ系クラス
左から右へ配置.flex-row
See the Pen bootstrap4 Flexbox : flex-row by kenichi (@ken81) on CodePen.
右から左へ配置.flex-row-reverse
See the Pen bootstrap4 Flexbox : flex-row-reverse by kenichi (@ken81) on CodePen.
上から下へ配置.flex-column
See the Pen bootstrap4 Flexbox : flex-column by kenichi (@ken81) on CodePen.
下から上へ配置.flex-column-reverse
See the Pen bootstrap4 Flexbox : flex-column-reverse by kenichi (@ken81) on CodePen.
改行の設定をするflex-wrapプロパティ系クラス
改行しない.flex-nowrap
See the Pen bootstrap4 Flexbox : flex-nowrap by kenichi (@ken81) on CodePen.
flex-nowrapを指定するとflexアイテムは改行されずに枠の外に出てしまいます。
改行する.flex-wrap
See the Pen bootstrap4 Flexbox : flex-wrap by kenichi (@ken81) on CodePen.
下から上に改行する.flex-wrap-reverse
See the Pen bootstrap4 Flexbox : flex-wrap-reverse by kenichi (@ken81) on CodePen.
ヨコの配置が指定できるjustify-contentプロパティ系クラス
左寄せ.justify-content-start
See the Pen bootstrap4 Flexbox : justify-content-start by kenichi (@ken81) on CodePen.
右寄せ.justify-content-end
See the Pen bootstrap4 Flexbox : flex-end by kenichi (@ken81) on CodePen.
中央寄せ.justify-content-center
See the Pen bootstrap4 Flexbox : justify-content-center by kenichi (@ken81) on CodePen.
均等割り付け.justify-content-between
See the Pen bootstrap4 Flexbox : justify-content-between by kenichi (@ken81) on CodePen.
等間隔の余白.justify-content-around
See the Pen bootstrap4 Flexbox : justify-content-around by kenichi (@ken81) on CodePen.
タテの高さや位置を指定するalign-itemsプロパティ系クラス
隙間なく配置.align-items-stretch
See the Pen bootstrap4 Flexbox : align-items-stretch by kenichi (@ken81) on CodePen.
align-items:stretch;を指定するとflexコンテナに指定された高さいっぱいにflexアイテムが広がります。
上寄せ.align-items-start
See the Pen bootstrap4 Flexbox : align-items-start by kenichi (@ken81) on CodePen.
下寄せ.align-items-end
See the Pen bootstrap4 Flexbox : align-content-end by kenichi (@ken81) on CodePen.
中央寄せ.align-items-center
See the Pen bootstrap4 Flexbox : align-content-center by kenichi (@ken81) on CodePen.
文字のベースラインに合わせる.align-items-baseline
See the Pen bootstrap4 Flexbox : align-items-baseline by kenichi (@ken81) on CodePen.
複数行のタテの配置を指定するalign-contentプロパティ系クラス
隙間なく配置する.align-content-stretch
See the Pen bootstrap4 Flexbox : align-content-stretch by kenichi (@ken81) on CodePen.
上寄せ.align-content-start
See the Pen bootstrap4 Flexbox : align-content-start by kenichi (@ken81) on CodePen.
下寄せ.align-content-end
See the Pen bootstrap4 Flexbox : align-content-end by kenichi (@ken81) on CodePen.
中央寄せalign-content-center
See the Pen bootstrap4 Flexbox : align-content-center by kenichi (@ken81) on CodePen.
均等割り付け.align-content-between
See the Pen bootstrap4 Flexbox : align-content-between by kenichi (@ken81) on CodePen.
等間隔の余白.align-content-around
See the Pen bootstrap4 Flexbox : align-content-around by kenichi (@ken81) on CodePen.
flexboxアイテムのタテ配置を個別設定するalign-selfプロパティ系クラス
See the Pen bootstrap4 Flexbox : align-content-around by kenichi (@ken81) on CodePen.
