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	横いっぱいに広げて表示する