Bootstrap4を利用していたときの気づきをご紹介します。
こういうデザインにしたいときがある
PC版
[ あなたのお名前：marshmallow88 ▶変更する ]
SP版
[ あなたのお名前： ]
[ marshmallow88 ]
[ ▶変更する ]
仕様の確認をしてしましょう。
上記は以下の要素に分かれています。
- あなたのお名前
- 名前
- 変更する
そして仕様は以下のようになります。
- PC版では、
あなたのお名前+名前が左寄せ、変更するは右寄せ - 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の知識も知っておくとよいなと思いました。