レスポンシブデザインのコーディングには欠かせないと言っていいほど使う機会の多い「display:flex;」
一昔前まではfloatやgridを使って表現していたレイアウトも、正直flex-boxさえあれば全て解決できるんじゃ？と思うほど多用しています。
また、個人的には横並びだけではなく普通のレイアウト（縦並び）でもめちゃくちゃ便利に使えると思っていて、特に「gap」の使い方を覚えるとWordpressのメインコンテンツエリアやリスト表示の中で重宝するのでご紹介します。
要素同士の間隔を調整する「gap」プロパティ
僕自身最近まで知らなかったのですが flexboxの間隔を調整するのに、gapと言うプロパティを使うことができます。（今調べてみたらflexboxでgapが使えるようになったのは2021年からだそうです）
このgapプロパティを使ってからコーディングの速度も正確性も格段に上がった気がします。
具体的に何ができるかというと、flexbox内の要素同士の間隔を一括で調整することができます。
これだけだと普通のマージンを使うのと何が違うの？と思う方も多いかもしれません。
flexboxの中でマージンを使って余白調整をすると次のようなお困りポイントがあります。
- nth-of-type()などで両端のマージン調整が必要になる
- before: after: などを使って最後の行を調整する必要がある
普段からflexboxを使う機会が多い方であればこの２つのちょっとした面倒差が分かると思いますが、初学者の方のために少し詳しくご説明していきます。
マージンで余白調整するときに起きる課題
例えば先ほどのデモでgapを使わずにmargin-leftとmargin-bottomだけで実現しようとすると、下記のように一番左の要素の左側にもスペースができてしまう、横幅が足りずに段落ちしてしまいます。
これはmargin-topやmargin-rightを使っても同じことが言えますね。
これを回避するためにはnth-of-type()などを使って1,4,7番目の要素からmargin-leftを削除し、さらに親要素のpadding-bottomを調整しておく必要があります。（子要素のmargin-bottomの値に合わせて余白が一定になるようにする）
これで一旦は綺麗に収まりましたが、もし横に2つ、あるいは4つ並べたいとなった場合、新しくcssを作成するか調整する必要があります。
FLOCCSなどの記法を使っていて、あらかじめ複数パターンがあることがわかっていれば対応もできますが、後からあれもこれもと追加されてしまうとゲンナリしてしまいますよね。
また、汎用性が低いのであまり使い回しができるとは言えません。
こう言った問題もgapを使って余白調整をしておけばクリアできます。（ある程度の調整は必要ですが・・・）
「justify-content:space-between;」を使うときに起きる課題
次に「justify-content:space-between;」を使うときに起きる課題をご紹介します。
「justify-content:space-between;」を使うことで、子要素を両サイドに自動で配置することができ、3列以上の場合は両サイド以外の余白を自動で調整してくれます。
この方法であればmargin-leftを使うよりもシンプルで汎用性も高くなりますが、実は落とし穴が・・・。
3列表示の場合、最後の行が2個になると要素が両サイドに配置されてしまうので等間隔で並べるという要件を満たさなくなります。
横並びする要素が2つのときは「justify-content:space-between;」はとても強力で使いやすいのですが、3つ以上の時で中身の数が動的に変わるような状況（記事一覧など）では使いにくいことがあります。
もしgap以外で対応する場合は:afterなどの擬似要素を最後に追加してあげることで、擬似的に最後の行の数を調整してあげる必要があります。
もし4列表示の場合は:afterだけだと最終行が2このときにレイアウトが崩れるので、同じようにして:beforeも入れる必要があります。その際、:beforeのorderプロパティに1以上の数字を当てて、一番最後に並ぶように調整してください。
5列以上の場合、この方法では対応することができません。空のdivなどダミー要素を入れて対応するしかないので、gapを使うことを推奨します。
縦並びにも使えるからgapはすごいんだ！
gapでは横方向と縦方向の間隔を個別に設定することができます。
gap: 20px 50px; // 縦・横
もしくは
row-gap: 20px; // 縦
column-gap: 50px; // 横
のように記述することで、縦と横の間隔を別々に調整することができます。
「flex-direction:column;」との相性抜群
親要素に「flex-direction:column;」と言うプロパティをつけてあげると、flexboxの並び方向を縦にすることができます。
ぱっと見だと何が変わったのかわかりませんが、ここにgapプロパティを指定することで全ての要素の間隔を一定に揃えることができるようになります。
これをうまく使えば、ページ全体のレイアウトを一括調整したり、Wordpressテーマであればpタグのマージン調整にも使えます。
<?php the_content(); ?>
↑をdiv等で囲んでgapの指定をしてあげれば、記事の中身全体を等間隔で配置できます。
見出しなど少し余白を多く取りたい箇所だけmarginをつけてあげることで、marginのつけ忘れで要素がくっついてしまうことも防げます。
また、個人的にはリスト系のコーディングでこの手法をよく使います。
ul,olはもちろんですが、ステップを紹介するようなコンテンツ、同じ要素が繰り返されるコンテンツであれば、横並び縦並び関係なくこの手法がつけるのでぜひ覚えておいてくださいね。
まとめ
gapを使うことで子要素の間隔を一括で指定できるのはとても強力！
特に子要素に様々なタグが使われるような場面（記事の中身など）では、一つ一つのクラスにマージンを指定するのが面倒なので、flexboxとgapをうまく活用することで保守性も高く保つことができるようになります。
ただし、flexboxを使っているとposition:sticky;を使う際など留意しなくてはいけないこともあるので、場面に合わせて適切な方法が選べるようにしておきましょう。