悩む人Flexboxで要素を並べたけど、余白の調整が地味に面倒…
悩む人marginで調整してるけど、コードがごちゃついて読みにくい…
そんな風に感じたことはありませんか？
CSSのgapプロパティを使えば、要素間のスペース調整が驚くほどシンプルかつ柔軟になります。
とはいえ、「本当にFlexboxで使えるの？」「ブラウザ対応は大丈夫？」といった不安の声も少なくありません。
そこで、この記事では、Flexbox×gapの基本から、ブラウザ対応状況、marginとの違い、実践的な使い方、そしてよくあるトラブルへの対処法までを、初心者にもわかりやすく解説します。
「今どきのCSS設計」をスムーズに身につけたい方は、ぜひ最後までご覧ください。きっと、これまでの悩みが解消されるはずです。
FlexBoxの詳しい使い方はこちらの記事で紹介していますのでチェックしてみてください。
- Flexboxでgapプロパティを使う方法と基本的な書き方
- Flexboxにおけるgapの対応ブラウザ状況と注意点
- marginとgapの違い、およびgapを使う3つのメリット
- 横並び・縦並びの具体的なコード例（コピペOK）
- gapが効かないときの原因とその対処法
Flexboxでも使えるgapプロパティとは
gapプロパティは要素間にのみ余白を取れる便利なプロパティです。
もともとgapプロパティは、CSS Gridレイアウトで列や行の間隔を設定するための専用機能として登場しました。
しかし、CSSの進化により、2020年以降、主要なブラウザではFlexboxにおいてもgapの使用がサポートされるようになりました。
Flexboxのgapを使うことで簡潔にスペースを管理できるようになり、レイアウト設計がさらに直感的になっています。
かすがFlexboxのレイアウトなら絶対marginよりgapの方が良いので積極的に使った方が良いすよ！
gapプロパティの基本的な書き方と単位
Flexboxでgapを使う際の基本的な書き方はとってもシンプルです。
以下のように、親要素に対してdisplay: flex;とgapを指定するだけでOK。
.container {
display: flex;
gap: 20px;
}
See the Pen 「gap」基本的な書き方 by kasuga (@kntkfmgf-the-vuer) on CodePen.
この例では、子要素間に20pxの間隔が設けられます。
数値の単位としては、px以外にもem、rem、%なども利用可能です。
また、縦と横で異なる間隔を設定したい場合は、以下のようにスペース区切りで2つの値を記述します。
.container {
display: flex;
gap: 40px 20px; /* 縦方向に40px、横方向に20px */
}
See the Pen 「gap」基本的な書き方 by kasuga (@kntkfmgf-the-vuer) on CodePen.
Flexboxのgapプロパティ対応ブラウザまとめ
現在、gapプロパティは主要なモダンブラウザでほぼ完全にサポートされています。特に Chrome・Firefox・Edge は安定して動作し、Flexboxでも問題なく使える状況です。
一方で Safari は対応が遅れた背景があり、ユーザーの環境によっては挙動が異なる場合があります。ただし、Safari 14以降では Flexbox のgapも正式に対応済みです。
| ブラウザ | Flexbox × gap対応バージョン |
|---|---|
| Chrome | 84 以降 |
| Firefox | 63 以降 |
| Safari | 14 以降 |
| Edge | 84 以降 |
IEでは使えないのでサポートする場合は注意！
Internet Explorer（IE）では Flexbox のgapは非対応です。そもそも IE は CSS Grid のgapすら対応しておらず、Flexbox に至っては一切利用できません。
しかし、2022年6月15日にIE自体のサポートが終了しているので、基本的には気にしなくてOKです。
もし IE11 を含む環境をサポートする必要があるなら、gapではなく従来どおりmargin を使った余白調整が必須となります。
gapとmarginは何が違う？
これまでFlexboxで要素間のスペースを確保するには、marginを使うのが一般的でした。
しかし、CSSの進化によって登場したgapプロパティは、marginにはないさまざまなメリットを持っています。
ここでは、両者の違いを比較しながら、gapを使うメリットを具体的にご紹介します。
gapとmarginの違い 比較表
| 比較項目 | gap（ギャップ） | margin（マージン） |
|---|---|---|
| 適用対象 | 親要素に指定して、子要素同士の間隔を調整 | 各子要素に直接指定して、外側の余白を調整 |
| 効果が出る位置 | 子要素間のみ（最初と最後の要素には影響しない） | 要素の四方向すべてに影響（上下左右に余白が出る） |
| 主な用途 | 要素同士の均等な間隔調整 | 要素の外側に余白を設ける |
| コードの簡潔さ | シンプルで1行で制御可能 | 要素ごとに調整が必要で複雑になりがち |
| 対応ブラウザ | モダンブラウザのみ（IEは非対応） | すべてのブラウザで対応 |
| Flexboxとの相性 | 非常に良い（Flexboxに最適化） | 調整は可能だが、コードが複雑になりやすい |
gapは意図した「要素間のスペース」だけを簡単にコントロールできるため、構造的で明確なレイアウト設計に向いています。
一方、marginは柔軟だが自由すぎてミスや崩れの原因になりやすいです。複雑なレイアウトでは意図しない空白ができることも。
gapを使うメリット・デメリット
メリット
gapの最大のメリットは要素同士の間にだけ余白を取ることができる点です。
余計なところに余白が入らないので、予想外の折り返しなどのレイアウト崩れが起きず、よりシンプルに直感的にコーディングすることができます。
以下、gapとmarginで4列で折り返していくアイテムに、余白を取る場合を比較してみます。
gapを使った場合
gapは親要素に1行書くだけで完結します。
.container {
display: flex;
gap: 20px;
}
See the Pen 「gap」基本的な書き方 by kasuga (@kntkfmgf-the-vuer) on CodePen.
margin-top、margin-rightを使った場合
一方、marginを使う場合はmargin-rightやmargin-topだけでは不要なところにも余白が入ってしまい、親要素の幅に入り切らず折り返してしまいます
.container_item{
margin-right: 20px;
margin-top: 20px;
}
See the Pen 「gap」marginを使った場合 by kasuga (@kntkfmgf-the-vuer) on CodePen.
margin-top、margin-rightを使って折り返さないようにする場合
ですので、:nth-childやnot()などを駆使して、レイアウト崩れが起きないようにする必要があり、コードが複雑になってしまいます。
.container_item{
margin-right: 20px;
}
.container_item:nth-child(4n){/*4の倍数はmargin-rightを0で打ち消す*/
margin-right: 0;
}
.container_item:nth-child(n+5){/*1段目にはmargin-topを適用したくないので「5番目の要素から」適用する*/
margin-top: 20px;
}
See the Pen 「gap」marginの不要な余白を消す場合 by kasuga (@kntkfmgf-the-vuer) on CodePen.
かすがこれがさらにスマホの場合は横2列にして…なんてやるとさらに複雑になってしまうんですよね…。gap知らない頃はこれでガチでやってました（汗）
デメリット
強いてデメリットを探すとすると、gapは全ての要素の間に一括で余白を指定するため、要素ごとに余白の数値を変えたい場合は使えません。そのような場合はmarginを使いましょう。
gapの使い方を実例で紹介【コピペOK】
gapプロパティのメリットがわかったところで、実際にどのように使うのか気になりますよね。
ここでは、Flexboxレイアウトにおけるgapの具体的な使い方を、シンプルなコード例とともに解説していきます
初心者の方でもすぐに実装できるよう、コピペで使える形でご紹介します。
グローバルナビゲーション
See the Pen 「Flexbox」align-self:stretch by kasuga (@kntkfmgf-the-vuer) on CodePen.
WEBサイトと言えばヘッダー！ど定番ですね。ロゴとナビを横に並べつつ、さらにナビもそれぞれ横に並べるパターンが多いわけで、Flexboxとgapが大活躍です！
コードはこちら
HTML
<header class="header">
<div class="header_logo"><a href="">LOGO</a></div>
<nav class="gnav">
<ul class="gnav_menu">
<li class="gnav_menu_item"><a href="">ナビ1</a></li>
<li class="gnav_menu_item"><a href="">ナビ2</a></li>
<li class="gnav_menu_item"><a href="">ナビ3</a></li>
<li class="gnav_menu_item contact"><a href="">お問い合わせ</a></li>
</ul>
</nav>
</header>
CSS
*{
box-sizing:border-box;
margin: 0;
padding: 0;
}
body{
background: #e4eff7;
font-size: 14px;
}
.header{
display: flex;/*ロゴとナビを横に並べる*/
justify-content: space-between;/*ロゴとナビを両端に揃える*/
padding: 20px;
}
.header_logo{
background: #fff;
border-radius: 10px;
font-weight: bold;
padding: 10px 30px;
}
.header_logo a{
color: #333;
display: block;
text-decoration: none;
}
.gnav_menu{
display: flex;/*ナビのアイテムを横並びにする*/
gap:10px;/*アイテム間の余白を10pxに*/
}
.gnav_menu_item{
background: #59b5ed;
border-radius: 10px;
list-style: none;
}
.contact{
background: #333;
}
.gnav_menu_item a{
color: #fff;
display: block;
font-weight: bold;
padding: 10px 30px;
text-decoration: none;
}
カード型ボックスのサムネイル一覧
See the Pen 「Flexbox」サンプル グローバルナビゲーション by kasuga (@kntkfmgf-the-vuer) on CodePen.
これもブログの一覧ページなどでお馴染みですよね。
余白を取るのにずっとmarginでやっていたのですが、gapを知ってしまったら、marginがアホらしくなるくらいマジで神すぎましたww。
コードはこちら
HTML
<div class="container">
<ul class="post_list">
<li class="post_list_item">
<a href="" class="post_list_link">
<div class="post_list_thumb">
<img src="https://life-design-day.com/samples/p4175/icatch.png" alt="img">
</div>
<div class="post_list_body">
<h2 class="post_list_title">サンプルタイトル</h2>
<p class="post_list_txt">サンプルテキスト</p>
</div>
</a>
</li>
<li class="post_list_item">
<a href="" class="post_list_link">
<div class="post_list_thumb">
<img src="https://life-design-day.com/samples/p4175/icatch.png" alt="img">
</div>
<div class="post_list_body">
<h2 class="post_list_title">サンプルタイトル</h2>
<p class="post_list_txt">サンプルテキストサンプルテキストサンプルテキスト</p>
</div>
</a>
</li>
<li class="post_list_item">
<a href="" class="post_list_link">
<div class="post_list_thumb">
<img src="https://life-design-day.com/samples/p4175/icatch.png" alt="img">
</div>
<div class="post_list_body">
<h2 class="post_list_title">サンプルタイトル</h2>
<p class="post_list_txt">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</div>
</a>
</li>
<li class="post_list_item">
<a href="" class="post_list_link">
<div class="post_list_thumb">
<img src="https://life-design-day.com/samples/p4175/icatch.png" alt="img">
</div>
<div class="post_list_body">
<h2 class="post_list_title">サンプルタイトル</h2>
<p class="post_list_txt">サンプルテキスト</p>
</div>
</a>
</li>
<li class="post_list_item">
<a href="" class="post_list_link">
<div class="post_list_thumb">
<img src="https://life-design-day.com/samples/p4175/icatch.png" alt="img">
</div>
<div class="post_list_body">
<h2 class="post_list_title">サンプルタイトル</h2>
<p class="post_list_txt">サンプルテキストサンプルテキストサンプルテキスト</p>
</div>
</a>
</li>
<li class="post_list_item">
<a href="" class="post_list_link">
<div class="post_list_thumb">
<img src="https://life-design-day.com/samples/p4175/icatch.png" alt="img">
</div>
<div class="post_list_body">
<h2 class="post_list_title">サンプルタイトル</h2>
<p class="post_list_txt">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</div>
</a>
</li>
</ul>
</div>
CSS
*{
box-sizing:border-box;
margin: 0;
padding: 0;
}
body{
background: #e4eff7;
font-size: 14px;
padding: 40px;
}
.container{
margin: 0 auto;
max-width:1000px;
}
.post_list{
display: flex;/*ボックスを横並びにする*/
flex-wrap:wrap;/*ボックスを折り返すようにする*/
gap:20px;/*アイテム間の余白を20pxに*/
}
.post_list_item{
list-style:none;
width: calc( (100% - 40px) / 3 );/*ボックス間の余白が20pxになるように幅を計算*/
}
.post_list_link{
background: #d2e7f5;
border: 4px solid #0272fc;
border-radius: 10px;
font-weight: bold;
display: block;
height: 100%;
padding: 30px;
text-decoration: none;
transition:.3s;
}
.post_list_link:hover{
opacity: 0.8;
transform: scale(1.05);
}
.post_list_thumb img{
height: auto;
max-width: 100%;
}
.post_list_title{
color: #0272fc;
margin-top: 30px;
}
.post_list_txt{
color: #60b6ff;
margin-top: 10px;
}
gapが効かないときの原因と対処法
gapは便利なプロパティですが、「あれ？適用されてない？」と感じるケースも少なくありません。
特にFlexboxと併用する際には、いくつかの落とし穴があります。
ここでは、gapが効かない主な原因と、それに対する具体的な対処法を丁寧に解説します。
display: flexが正しく設定されていない
最もよくある原因が、親要素に display: flex を指定していないケースです。
gapは、Flexboxの文脈においては親要素がflexコンテナであることが前提条件になります。
以下のように、親にdisplay: flexを設定し忘れると、gapは一切効きません。
/* NG例：displayが未設定 */
.container {
gap: 20px;
}
/* OK例 */
.container {
display: flex;
gap: 20px;
}
古いSafariやIEでの非対応
Safari 14未満やIE11では、Flexboxでのgapが非対応です。そのため、表示が崩れたり、スペースがまったく反映されないことがあります。
対処法としては以下の2つが考えられます：
- モダンブラウザのみをサポート対象とする
- marginに切り替える
まとめ：Flexboxでのgapは今後の標準！使いこなして効率的にレイアウトしよう
ここまで、Flexboxにおけるgapプロパティの使い方やメリット、注意点について詳しく解説してきました。
最後に、この記事の内容を簡単におさらいします。
本記事のポイントおさらい
- Flexboxでもgapは使える！
もともとはGrid専用だったが、モダンブラウザではFlexboxにも対応。 - 主要ブラウザは対応済み、ただしIEと古いSafariには注意
Safari 14未満やIE11では非対応。必要に応じてmarginとの併用も検討。 - gapを使えばコードがシンプル＆管理しやすい
marginよりも可読性・保守性に優れており、レイアウトのバグも減らせる。 - 効かない原因は display の設定やブラウザのミスマッチが多い
gapが効かないときは、設定漏れや方向の確認を忘れずに。
かすが最後まで読んでいただきありがとうございました！以下のおすすめ記事もチェックして見てくださいね！
まだブログを始めていない方は以下の記事をぜひチェック！
ブログを始めたばかりの人は以下の記事をぜひチェック！
