Bootsrtap

Bootstrap4でFlexboxを使いこなすためのクラス名一覧

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.

WordPressテーマ「MAG(TCD036)」

最近の記事

  1. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  2. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  3. CSS

    CSS|中央寄せが効かないときは・・・
  4. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  5. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
PAGE TOP