ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】flexboxのgapを解説！余白指定が超便利に！

【CSS】flexboxのgapを解説！余白指定が超便利に！

HTML/CSS

2022/05/27

2023/05/08

gap はflexアイテム間の余白を指定するプロパティです。gap を使用すれば margin を使用するよりも簡単に、かつ柔軟にflexアイテム間の余白を指定できます。

この記事ではgapの使い方を解説します。

この記事で身につく内容

gap とは
gap の使い方
gap と margin の違い
gap の使用例

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

gapとは
- gapのブラウザ対応状況
gapの使い方
gapとmarginの違い
gapのメリットとデメリット
- gapを使用するメリット
- gapを使用するデメリット
gapの使用例
まとめ

gapとは

gap はflexアイテム間の余白を指定するプロパティです。gap は flex コンテナに有効なプロパティであるため、親要素に display: flex; と gap をそれぞれ指定します。

gap には数値と単位を指定します。gap に使用できる単位は px, em, rem, %などです。gap に指定する値が1つのときは縦・横に同一の余白が与えられます。gap に指定する値が2つのときは、縦の余白・横の余白という順に記述します。

gap は、もともと grid で使われていたプロパティです。gap のリリース後、ほどなくしてflexbox にも対応しました。

grid は flexbox とは異なるレイアウトモジュールであり、flexbox よりも高度な要素の配置を行えます。grid についてはこちらの記事で詳しく解説しています。学習にお役立てください。

CSS Gridの使い方を丁寧に解説！爆速でレイアウトを完結させよう！

gapのブラウザ対応状況

gap のブラウザ対応状況は、以下のようになっています。

引用：Can I use

gapの使い方

以下は gap を使用するときの基本形です。

.flexbox {
  display: flex;
  gap: 20px;/*縦・横で同じ余白*/
  gap: 20px 30px;/*縦20px、横30pxの指定*/
}

縦・横の横の余白を個別に指定する場合はcolumn-gap、row-gapをそれぞれ使用します。

以下はgapを使用したときの記述例と出力結果です。

 <div class="flexbox">
   <div class="flex-item item01">①</div>
   <div class="flex-item item02">②</div>
   <div class="flex-item item03">③</div>
   <div class="flex-item item04">④</div>
   <div class="flex-item item05">⑤</div>
   <div class="flex-item item06">⑥</div>
 </div>

.flexbox {
  display: flex;
  flex-wrap:wrap;
  text-align: center;
  height: 100px;

  gap: 20px 30px;/*縦に20px,横に30pxの余白を指定*/
}

.flex-item {
 width: 30%;
}

/*各flexアイテムの背景色*/
.item01 {
 background-color: red;
}

.item02 {
 background-color: blue;
}

.item03 {
 background-color: green;
}

.item04 {
 background-color: yellow;
}

.item05 {
 background-color: purple;
} 

.item06 {
  background-color: pink;
}

gapとmarginの違い

余白を指定するプロパティといえば、margin を使用している方も多いのではないでしょうか。gap と margin にはそれぞれ適した使用場面があります。コーディングを効率よく行うには、うまく使い分けることが大切です。

以下が gap と margin の違いです。

	gap	margin
対象となる要素	flexコンテナ（親要素）にのみ指定可能	すべての要素に指定可能
余白の範囲	flexアイテム間の余白のみ指定できる上下左右の外側の余白は指定できない	要素の外側すべてに余白を指定できる
要素のサイズへの影響	gapの値に応じて、flexコンテナに合わせてflexアイテムの横幅・高さが変化する	要素の横幅・高さは変化しない