#76 flexとgap

CSSのGridは何か複雑な感じがして手を出していなかったけれど、余白を指定できるgapがflexでも使えるそうなので試してみた。

iOS13では対応していなかったけれど、あれから数年経ったし、推奨端末が最新版というような案件では使っていこうかなと。

使い方：親要素に　gap: 縦の余白　横の余白;　以上

ちなみにChromeの開発者ツールで見てみると下記

gapを付けた親要素の詳細

行の余白はrow-gap　列はcolumn-gap　まるでtableのような概念
上のボックスモデルの図を見てもよくわからない（親要素にかけているからだけど）。子要素を見ても図で余白は表示されていない。

子要素のボックスモデル

marginじゃなくてgapだから数値は記載されないんだけど、長年ボックスモデルがしみついた身としては不思議な感覚。

とはいえ、今までのmarginのように、ul li:nth-child(3n+1)はmargin-left:0みたいな冗長な指定をしなくてよくなるのはよさそう。

参考

gap - CSS: Cascading Style Sheets | MDN

gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA

ヘッダー画像は、二代目小佐川常世　東洲斎写楽。背景がテーブルっぽいから付けた。