💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
CSSのgapで間隔を付ける方法｜Flexbox・Grid
📌
結論
gap で子要素間に間隔を一括指定できます
📝 実際のコードはこちら
.container { display: flex; gap: 16px; }gapの利点
| 方法 | メリット | デメリット |
|---|---|---|
gap | シンプル、余計な余白なし | — |
margin | 個別制御 | 最初/最後に余分な余白 |
gap は最初と最後の要素に余白が付かないのがポイントです。
まとめ
・gap はFlexbox・Grid両方で使える
・marginより簡潔で副作用がない
演習で試してみよう
Flexboxの子要素間に16pxのgapを付けてみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
Flexboxの子要素間に16pxの間隔を付けてください。
詰まったらヒント
gap: 16px;