display:flexで並べた要素間の余白設定はgapが便利

プログラミングを勉強中のみなさん、こんにちは！

今回は、flexの余白設定で使える「gap」について紹介します。

余白というと、margin や padding　などを思い浮かべると思いますが、
gapという余白設定も利便性がありますので、注目してみましょう。

それではさっそくいきましょう。

gap の利便性

gap は、行や列の間のすき間（余白）を定義します。

何が便利かというと、単純に要素間のすき間の値を考えればいいので、とても直感的で使いやすいです。

marginだと、複数の要素を並べたとき、最後の要素だけ余白をなくすために last-childを使うとか、
レイアウトによっては要素の外側の余白を考えなければいけないとか、手間がかかるケースがあります。

下のコードペンで、justify-content と gapのコードを書いたので見てみましょう。

ヘッダーのメニューリストをイメージしました。
※0.5倍で見てとわかりやすいです。

See the Pen
flex-sa&sb by t.h (@tomtom15)
on CodePen.

ブラウザを広げたり、狭めたりしてみるとわかりやすいですのですが、
space-around や space-between の余白は、ブラウザの大きさに応じて余白が変動します。

ですので、ブラウザ幅を広げると、要素間の余白が間伸びしたり、
逆に狭めると、要素間の余白が無くなり、くっつきすぎてしまうこともあります。

しかし、space-aroundやspace-betweenを使わず、gapを使って余白の値を固定することで、余白を一定に保つことができます。

下のコードペンのように display:grid; と組み合わせるとできることが増えます。

※記事の内容からそれてしまうので、コードの解説は省略します。

See the Pen
grid-gap by t.h (@tomtom15)
on CodePen.

同じ要素を、数多く列挙するときは便利だと思います。

列方向の余白、行方向の余白、それぞれ設定できます。

余白の値は、pxのような絶対値でなく、％や remにしてもＯＫです。

ということで、今回はgapの紹介でした。

使い方は簡単ですので、ケースバイケースで、justify-content　と　gap　を使い分ければいいと思います。

CSSでグリッドを使う方法を紹介しておきます。

独学で行き詰まっている人はテックアカデミー無料メンター相談もおすすめです。