【Bootstrap4】d-flexも使おう、row / colだけがレスポンシブを表現するわけじゃない

Bootstrap4を利用していたときの気づきをご紹介します。

こういうデザインにしたいときがある

PC版
[ あなたのお名前：marshmallow88             ▶変更する ]

SP版
[  あなたのお名前：           ]
[  marshmallow88            ]
[                  ▶変更する ]

仕様の確認をしてしましょう。
上記は以下の要素に分かれています。

• あなたのお名前
• 名前
• 変更する

そして仕様は以下のようになります。

1. PC版では、あなたのお名前 + 名前 が左寄せ、変更するは右寄せ
2. SP版では、あなたのお名前、名前、変更するがともに改行され、かつ変更するは右寄せ

Bootstrap4を利用して、row + col を利用して書いてみると...？

cssがそこまで得意ではないので、やはりよく頼るのがCSSフレームワーク、Bootstrapはその代表格です。
ではBootstrapを使って、row + colのクラスを利用して書いてみましょう。仕様どおりに作成できるでしょうか...？

<div class="row">
    <div class="col-md text-danger">
        あなたのお名前：
    </div>
    <div class="col-md font-weight-bold">
        marshmallow88
    </div>
    <div class="col-md text-right">
        ▶変更する
    </div>
</div>

まず仕様2に関して満たせるようになります。col-mdを指定しているので、SP版の場合はブレイクポイントの範囲外となるため、flex-basisやflex-growなどのスタイルが付与されないため、それぞれブロックが積み上がる状態で表示がされます。

では次に仕様1についてはどうでしょうか。実はここで問題が発生します。col-** 関係はそれぞれ両端にpaddingを取るため、[あなたのお名前:＿名前]のような空白が発生しています。ではどうするのか。

d-flex + flex-column + flex-md-row を利用して表現する

d-flexは知っていて、なるほどdisplay:flex;にする程度のものだと思っていたのですが、それ以外にもflex-columnやflex-md-rowを併記することで、仕様を実現することができます。

<div class="d-flex flex-column flex-md-row">
    <div class="text-danger">
        あなたのお名前：
    </div>
    <div class="font-weight-bold">
        marshmallow88
    </div>
    <div class="flex-md-fill">
        ▶変更する
    </div>
</div>

flex-column はflex-directionをcolumnに、つまり縦方向に並べます。そして、flex-md-rowはmdのブレイクポイントの対象となる場合に、flex-directionをrowにします。つまり普通のflexによる横並びが実現されます。

上から順に、

• display: flex; に変更
• flex-direction: column; に変更
• mdのブレイクポイントの対象となる場合は、flex-direction: row;に変更（※メディアクエリで指定されています）

という仕組みでレスポンシブを実現しています。

flexだけ知っているだけじゃなく、flex-directionも知ろう

flexは雰囲気で書いていたけれど、原理の解説記事を起こすと、改めてflexのことを知らないのだなあと思いました。特定のサイズのみに対応するのであれば横並べのためにflexを使い、縦並びにはdivで積む、といったことで対応できます。ですが、様々なデバイスサイズに対応したものを作成するとなったときに、やはりflex-directionの知識も知っておくとよいなと思いました。