bootstrap4でflexboxを使うには?

bootstrap CSS

bootstrap4でflexboxを使うには?

前回cssでflexを使ってみましたが、bootstrap4にはflexを使うためのクラスが用意されているので試してみました。
公式ドキュメントにそって、使いそうなものだけサンプルを書いてどう動くか試して、簡単に解説を書いています。

公式のドキュメントはこちら

フレックスボックス使うよ(d-flex, d-inline-flex)を指定する

flexを使うときにd-flex, d-inline-flex指定します。

それぞれ指定すると、こんな感じになります。

See the Pen
bootstrap4 flex(d-flex, d-inline-flex)
by yasuaki (@include777)
on CodePen.

違いは下記です。
d-flexはブロック要素のようにふるまって、子要素を並べることができます。
d-inline-flexはインライン要素のようにふるまって、子要素を並べることができます。
inlineは改行なしのspanタグとかで使うイメージですかね。

bootstrap4のクラスを見るとそれぞれ、下記のように定義されています。

d-flex => display: flex !important;
d-inline-flex => display: inline-flex !important;

子要素の並び順の縦と横を入れ替える(flex-direction)

bootstrap4のd-flexで並び順の初期は行(flex-direction:row)になっているので、
縦(flex-direction:column)にするには、flex-columnを指定すると縦並びになります。

<div class="d-flex flex-column bg-info p-3">
  <div class="p-3 m-1 bg-white">a</div>
  <div class="p-3 m-1 bg-white">b</div>
  <div class="p-3 m-1 bg-white">c</div>
</div>

See the Pen
bootstrap4 flex(flex-column)
by yasuaki (@include777)
on CodePen.

子要素の横位置を変更する(justify-content-*)

子要素の横の位置を変える場合はjustify-contentから始まるクラスを使います。
子要素が縦並び(flex-direction:column)の場合は上下の並び順が変わります。

See the Pen
bootstrap4 flex(justify-content)
by yasuaki (@include777)
on CodePen.

クラス 内容
justify-content-start 左寄せにする
justify-content-end 右寄せにする
justify-content-centen 左右中央寄せにする
justify-content-between 等間隔にする
justify-content-aroun 等間隔にする(開始と終了の箇所に空白が入る)

flex-columnを使って、子要素を縦並びにしている場合は下記のようになります。

See the Pen
ExKQKrJ
by yasuaki (@include777)
on CodePen.

クラス 内容
justify-content-start 上寄せにする
justify-content-end 下寄せにする
justify-content-centen 上下中央寄せにする
justify-content-between 縦に等間隔にする
justify-content-around 縦に等間隔にする(開始と終了の箇所に空白が入る)

子要素の縦位置を変更する(align-items-*)

子要素の縦の位置を変える場合はalign-itemsから始まるクラスを使います。
子要素が縦並び(flex-direction:column)の場合は左右の並び順が変わります。

See the Pen
bootstrap4 align-items
by yasuaki (@include777)
on CodePen.

クラス 内容
align-items-start 上寄せにする
align-items-end 下寄せにする
align-items-centen 上下中央寄せにする
align-items-baseline 子要素の内容でベースラインに揃える
align-items-stretch 縦いっぱいに広げて表示する

flex-columnを使って、子要素を縦並びにしている場合は下記のようになります。

See the Pen
bootstrap4 align-items(flex-column)
by yasuaki (@include777)
on CodePen.

クラス 内容
align-items-start 左寄せにする
align-items-end 右寄せにする
align-items-centen 左右中央寄せにする
align-items-baseline 効いてなさそう….
align-items-stretch 横いっぱいに広げて表示する

align-items-startとalign-items-baselineの違いは?

baselineの方はコンテンツの中身で、ベースラインに揃えてくれます。
この辺に書いてある内容になります。

子要素での位置指定(align-self)

親ではなく、子要素に対して指定して位置を変更します。

See the Pen
bootstrap4 align-self
by yasuaki (@include777)
on CodePen.


※↑flex-directionが横/縦のものを一緒に検証しています。

親で指定されている、子要素の並びが横の場合は下記のようになります。

クラス 内容
self-align-start 上寄せにする
self-align-end 下寄せにする
self-align-centen 上下中央寄せにする
self-align-baseline 効いてなさそう….
self-align-stretch 縦いっぱいに広げて表示する

親で指定されている、子要素の並びが縦の場合は下記のようになります。

クラス 内容
self-align-start 左寄せにする
self-align-end 右寄せにする
self-align-centen 左右中央寄せにする
self-align-baseline 効いてなさそう….
self-align-stretch 横いっぱいに広げて表示する

子要素の折り返し指定

子要素を折り返すか折り返さないかは、下記のクラスを使います。

クラス 内容
flex-wrap 折り返す
flex-nowrap 折り返さない
flex-warap-reverse 折り返して、逆順で表示

See the Pen
bootstrap4 flex (wrap)
by yasuaki (@include777)
on CodePen.

終わりに

自分で指定するより、簡単にflexが使える感じがしました。便利なので使っていきたいと思います。
baselineについてはよくわからなかったので…誰か教えてください😟

コメント

タイトルとURLをコピーしました