技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS Grid Layout（グリッドレイアウト）とFlexbox（フレキシブルボックスレイアウト）では、gap は、行ギャップ (ガター) と列ギャップ (Flexbox では「軸間ギャップ」と呼ばれることが多い) の両方のサイズを設定する短縮プロパティです。このプロパティにより、以前は個別に設定する必要があったことが大幅に簡素化されます。row-gap（または grid-row-gap 従来の CSS グリッド内)、およびcolumn-gap（または grid-column-gap）面倒な手続き。

グリッドレイアウトで使用

CSSグリッドレイアウトでは、gap プロパティでは、グリッドの行とグリッドの列の間のギャップのサイズを同時に設定できます。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三个等宽的列 */
  gap: 20px; /* 同时设置行和列间隙为20px */
  /* 或者更具体地 */
  /* gap: 20px 30px; /* 第一个值设置行间隙，第二个值设置列间隙 */
}
1
2
3
4
5
6
7

フレックスボックスで使用される

フレックスボックスでは、gap プロパティは、フレックス項目間のギャップを設定するために使用されます。これには、主軸と交差軸のギャップが含まれます（ただし、フレックスボックスでは、交差軸のギャップの概念はグリッドほど直感的ではない可能性があります。これは、主にオブジェクトのレイアウトに影響するためです）複数行のフレックスコンテナ)。

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 允许flex项换行 */
  gap: 10px; /* 同时设置主轴和交叉轴上的间隙为10px */
  /* 或者更具体地 */
  /* row-gap: 10px; /* 仅在需要时设置行间隙 */
  /* column-gap: 15px; /* 仅在需要时设置列间隙（或交叉轴间隙），但这在Flexbox中通常不太常见 */
}
1
2
3
4
5
6
7
8

ご注意ください、gap 属性の値には長さを指定できます (例:px、em、vw など）、パーセンテージまたはその他row-gapそしてcolumn-gap受け入れられる有効な値。さらに、必要に応じて、row-gapそしてcolumn-gap異なる値を設定するには、これら 2 つの値を次のように渡すことができます。gapこのプロパティは 2 つの引数として指定され、最初の値は行ギャップに対応し、2 番目の値は列ギャップ (グリッドの場合) または軸の交差ギャップ (フレックスボックスの場合、これはあまり一般的ではありません) に対応します。

注目に値するのは、gapプロパティは最近のブラウザ バージョンで広くサポートされていますが、CSS は依然として下位互換性を念頭に置いて作成する必要があり、使用する必要がある場合があります。-webkit-プレフィックス (一部の古いブラウザの場合) を追加するか、フォールバックを提供します。