この記事について
この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。
emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。
Flexboxとは
Flexbox（Flexible Box Layout Module）はフレキシブルボックスレイアウトモジュールという名前の通り、ボックスのレイアウトを簡単に実現できるものです。
Flexboxを使用すると、今までFloatで処理してきた横並びレイアウトはもちろん、親要素と子要素のプロパティを組み合わせてボックスとボックスの余白を調整することもできます。
gapがモダンブラウザでサポートされました
FlexboxのgapがSafari 14.1からサポート開始となりました。
これで、モダンブラウザではひととおりサポートされたことになります。
詳細記事（英文）: New WebKit Features in Safari 14.1 | WebKit
gapとは
gapはflexアイテム間の余白部分に適用されます。
今まではgapはSafariで対応していなかったこともあり、Flexboxレイアウトでのflexアイテム同士の余白はmarginやpaddingを使用していましたが、gapがSafariでも対応されたことで利用しやすくなり、flexアイテム間の調整がわかりやすく簡単になりました。
以下のコードでは、.gap-sample1{} 内で gap:20px; と指定しています。
gapの使用例
このように親要素で指定したgapの値はflexアイテムのliとliの間に適用されます。
gapの指定方法
gapでは行（column-gap）と列（row-gap）をまとめて記述しています。
以下は行と列の間隔をそれぞれ指定した場合です。
以下のコードでは、.gap-sample2{} 内で gap:10px 20px; と指定しています。
gapではなくmarginを使用した場合
gapを使用せずにmarginを用いてもflexアイテムの間隔を調整できますが、marginを使用した場合は以下のようになります。
以下のコードでは、.flex-margin li{} 内で margin:10px 20px; と指定しています。
このようにgapの時と同じ10px 20pxとした場合1つのflexアイテムにそれぞれ上下に10pxずつ、左右に20pxずつ追加されてしまいます。
そのため、上記を同じ間隔のレイアウトを実現するためには以下のように記述する必要があります。
以下のコードでは .flex-margin li:nth-child(-n+3){} 内と .flex-margin li:nth-child(n+4){} 内でmarginを指定しています。
このようにmarginを使用した場合は1行めに表示されている3つ目のliまでは上に余白5pxができないように、2行めに表示されている4つ目から6つ目までのliの下に5pxの余白ができないように記述しています。
上記のように指定するとデバイスによっては2列で表示、3列で表示とそれぞれli要素への指定が増えていくため、CSSが煩雑になってしまいます。
煩雑になると調整するための記述も増えて、修正漏れや記述漏れの原因となります。
まとめ
gapがモダンブラウザでサポートされたことにより、今までmarginで対応していたことにより煩雑なCSSとなっていた箇所も、すっきりとしたわかりやすい記述で実装できますね。
