display: flex;の中に配置するアイテム間の余白を調整したいとき。

今まではmarginで頑張ってたんだけどgapというのが使えることがわかった。

Can I use 〜で見ても、主要なブラウザの直近のバージョンはほぼサポートしているみたいだし、使っていっても問題なさそう。

gap property for Flexbox

使ってみたサンプルはこちら。

See the Pen display: flex;で余白をgapで調整する by Makoto Ohnami (@zohnami) on CodePen.

こんな感じで親要素のタグにgapを設定してあげればOK

gap: 10px;

縦と横で余白幅を変えたいときは追加で指定してあげる感じ。

gap: 10px 20px;

marginでやると、アイテムが下段に回り込んだときとか、画面の都合で親要素のスペースが十分に確保できなかったときに想定外のずれが出ちゃったりする。

gapを使うとその辺が見事に解消されるし、親要素にしていすればいいだけなので、コード量も減ってコーディングが楽になる。

新しく組むときは積極的に使っていきたい。

この記事の環境情報

  • HTML, CSS
  • 少し飲み過ぎた朝