Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

column-gap

フレックスコンテナまたはグリッドコンテナ内の列方向（主軸方向）のアイテム間の間隔を指定します。

サンプルコード

/* 列間を16pxに指定 */
.container {
    display: flex;
    column-gap: 16px;
}

/* row-gapと組み合わせて使用 */
.container-combo {
    display: flex;
    flex-wrap: wrap;
    row-gap: 32px;
    column-gap: 16px;
}

指定可能な値一覧

値	概要
normal	初期値です。Flexboxでは0に相当します。マルチカラムレイアウトでは『1em』に相当します。
<length>	px、em、remなどの長さの値で間隔を指定します。
<percentage>	コンテナのサイズに対するパーセンテージで間隔を指定します。

仕様情報

項目	内容
初期値	normal
適用対象	フレックスコンテナ、グリッドコンテナ、マルチカラムコンテナ
継承	しない
アニメーション	可能（length/percentage として補間）

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1.5 以降 ○

Safari

3 以降 ○

2 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

11 ○

10 ○

9 ×

8 ×

7 ×

6 ×

Opera

11.1 以降 ○

10 以前 ×

モバイル

iOS Safari

2 以降 ○

1 以前 ×

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

概要

『column-gap』はアイテム間の列方向の間隔を指定するプロパティです。『flex-direction: row』の場合、横に並んだアイテム同士の間隔を制御します。以前はマルチカラムレイアウト専用でしたが、FlexboxとCSS Gridにも適用されるようになりました。

『gap』との使い分け

行間と列間に同じ値を設定する場合は『gap』一つで済みます。列間だけを指定したい場合は『column-gap』を使います。

/* 以下の2つは同じ意味 */
.container-a { gap: 32px 16px;}
.container-b { row-gap: 32px; column-gap: 16px;}

WebProgrammingPortalウェブプログラミングポータル