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についてはよくわからなかったので…誰か教えてください😟
コメント