メインコンテンツまでスキップ

gap

gap プロパティは、フレックスアイテム間のスペース（余白）を設定するためのプロパティです。 従来はマージンを使用してアイテム間の余白を作成していましたが、gapプロパティを使用することで、より簡単で一貫性のある余白の設定が可能になります。

gap プロパティの基本​

gap プロパティは以下の方法で使用できます：

CSS
.flex-container {
  display: flex;
  gap: 20px; /* すべての方向に20pxの余白 */
}

gap なし​

デフォルトでは、フレックスアイテム間に余白はありません。

CSS
.flex-container {
  display: flex;
  /* gap: 0; デフォルト値 */
}
アイテム 1
アイテム 2
アイテム 3

gap あり​

gap プロパティを設定すると、アイテム間に統一された余白が生まれます。

CSS
.flex-container {
  display: flex;
  gap: 20px;
}
アイテム 1
アイテム 2
アイテム 3

row-gap と column-gap​

gap プロパティは、row-gap と column-gap のショートハンドプロパティです。 それぞれ個別に設定することも可能です。

row-gap​

row-gap は行間（垂直方向）の余白を設定します。

CSS
.flex-container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 15px;
}

column-gap​

column-gap は列間（水平方向）の余白を設定します。

CSS
.flex-container {
  display: flex;
  flex-wrap: wrap;
  column-gap: 25px;
}

個別設定の例​

行と列で異なる余白を設定する場合：

CSS
.flex-container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;    /* 行間は10px */
  column-gap: 30px; /* 列間は30px */
  
  /* 上記は以下と同じ */
  gap: 10px 30px;
}
アイテム 1
アイテム 2
アイテム 3
アイテム 4
アイテム 5

flex-direction との組み合わせ​

gap プロパティは、flex-direction の値に関係なく動作します。

row（水平配置）​

CSS
.flex-container {
  display: flex;
  flex-direction: row;
  gap: 15px;
}
アイテム 1
アイテム 2
アイテム 3

column（垂直配置）​

CSS
.flex-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
アイテム 1
アイテム 2
アイテム 3

従来の方法との比較​

マージンを使用した従来の方法​

従来の方法
.flex-container {
  display: flex;
}

.flex-item {
  margin-right: 20px;
}

.flex-item:last-child {
  margin-right: 0; /* 最後の要素の右マージンを削除 */
}

gap を使用した現代的な方法​

現代的な方法
.flex-container {
  display: flex;
  gap: 20px; /* シンプルで一貫性がある */
}

gap プロパティの利点：

  • シンプル: 1つのプロパティで余白を設定
  • 一貫性: すべてのアイテム間で統一された余白
  • メンテナンス性: アイテムの追加・削除時に調整不要
  • レスポンシブ対応: メディアクエリと組み合わせやすい

実用例​

カードレイアウトやボタングループなど、実際のWebデザインでよく使用される例：

カードレイアウト​

CSS
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

カード 1

カード 2

カード 3

gap プロパティを使用することで、より保守性が高く、理解しやすいFlexboxレイアウトを作成できます。