Caution

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

CSSプロパティ辞典

row-gap

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

サンプルコード

/* 行間を20pxに指定 */
.container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
}

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

指定可能な値一覧

値	概要
normal	初期値です。Flexboxでは0に相当します。
<length>	px、em、remなどの長さの値で間隔を指定します。
<percentage>	コンテナのサイズに対するパーセンテージで間隔を指定します。

仕様情報

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

対応ブラウザ

デスクトップ

Chrome

47 以降 ○

46 以前 ×

Firefox

52 以降 ○

51 以前 ×

Safari

10.1 以降 ○

9 以前 ×

Edge

16 以降 ○

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

11 ×

10 ×

9 ×

8 ×

7 ×

6 ×

Opera

34 以降 ○

33 以前 ×

モバイル

iOS Safari

10.3 以降 ○

9 以前 ×

Android Browser

47 以降 ○

46 以前 ×

Chrome Android

概要

『row-gap』はアイテム間の行方向の間隔を指定するプロパティです。『flex-direction: row』でかつ『flex-wrap: wrap』の場合、折り返しによって生じる行と行の間の間隔を制御します。『column-gap』とは独立して行間だけを調整したい場合に使います。

『gap』との使い分け

行間と列間に同じ値を設定する場合は『gap』一つで済みます。行間と列間に異なる値を設定したい場合は『gap: 行間列間;』と書くか、『row-gap』と『column-gap』を個別に指定します。

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

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