CSS gap 属性
css3基础 2023-07-30 16:16:3917小码哥的IT人生shichen
CSS gap 属性
定义和用法
gap 属性定义 flexbox、网格或多列布局中行与列之间的间隙大小。它是以下属性的简写属性:
注意:gap 属性以前被称为 grid-gap。
另请参阅:
CSS 教程:CSS 网格布局
CSS 教程:CSS 弹性框布局
CSS 教程:CSS 多列布局
CSS 参考手册:row-gap 属性
CSS 参考手册:column-gap 属性
实例
例子 1
将行与列之间的间距设置为 50px:
.grid-container { gap: 50px; }
完整实例【亲自试一试】:
<!DOCTYPE html> <html> <head> <style> .grid-container { border: 1px solid black; background-color: mintcream; display: grid; grid-template-columns: auto auto auto; gap: 50px; } .grid-container > div { border: 1px solid black; background-color: yellow; } </style> </head> <body> <h1>gap 属性</h1> <p>使用 <em>gap</em> 属性指定行和列之间的间隙大小。</p> <p>这个网格在行之间和列之间有 50px 的间隙:</p> <div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html
例子 2:网格布局
在网格布局中将行间距设置为 20px,将列间距设置为 50px:
#grid-container { display: grid; gap: 20px 50px; }
完整实例【亲自试一试】:
<!DOCTYPE html> <html> <head> <style> #grid-container { border: 1px solid black; background-color: mintcream; display: grid; grid-template-columns: auto auto auto; gap: 20px 50px; } #grid-container > div { border: 1px solid black; background-color: yellow; } </style> </head> <body> <h1>在网格中使用 gap 属性</h1> <p>使用 <em>gap</em> 属性指定行和列之间的间隙大小。</p> <p>这个网格在行之间有 20px 的间隙,在列之间有 50px 的间隙:</p> <div id="grid-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html
例子 3:弹性框布局
在弹性框布局中将行间距设置为 20px,将列间距设置为 70px:
#flex-container { display: flex; gap: 20px 70px; }
完整实例【亲自试一试】:
<!DOCTYPE html> <html> <head> <style> #flex-container { border: 1px solid black; background-color: rgb(255, 230, 251); display: flex; flex-wrap: wrap; gap: 20px 70px; } #flex-container > div { border: 1px solid black; width: 10%; aspect-ratio: 2; padding: 10px; background-color: lightgreen; } </style> </head> <body> <h1>在弹性框中使用 gap 属性</h1> <p>使用 <em>gap</em> 属性指定 flexbox 布局中行和列之间的间隙大小。</p> <p>这个弹性框布局在行之间有 20px 的间距,在列之间有 70px 的间距:</p> <div id="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html
例子 4:多列布局
在多列布局中将列间距设置为 50px:
#newspaper { columns: 3; gap: 50px; }
完整实例【亲自试一试】:
<!DOCTYPE html> <html> <head> <style> #newspaper { border: solid black 1px; background-color: lightgoldenrodyellow; columns: 3; gap: 50px; } </style> </head> <body> <h1>在多列布局中使用 gap 属性</h1> <p>在多列布局中使用 <em>gap</em> 属性来指定列之间的间隙大小。</p> <p>这个多列布局的列之间有 50px 的间距:</p> <div id="newspaper"> 第一回 宴桃园豪杰三结义 斩黄巾英雄首立功 话说天下大势,分久必合,合久必分:周末七国分争,并入于秦;及秦灭之后,楚、汉分争,又并入于汉;汉朝自高祖斩白蛇而起义,一统天下,后来光武中兴,传至献帝,遂分为三国。推其致乱之由,殆始于桓、灵二帝。桓帝禁锢善类,崇信宦官。及桓帝崩,灵帝即位,大将军窦武、太傅陈蕃,共相辅佐;时有宦官曹节等弄权,窦武、陈蕃谋诛之,机事不密,反为所害,中涓自此愈横。建宁二年四月望日,帝御温德殿。方升座,殿角狂风骤起,只见一条大青蛇,从梁上飞将下来,蟠于椅上。帝惊倒,左右急救入宫,百官俱奔避。须臾,蛇不见了。忽然大雷大雨,加以冰雹,落到半夜方止,坏却房屋无数。建宁四年二月,洛阳地震;又海水泛溢,沿海居民,尽被大浪卷入海中。光和元年,雌鸡化雄。六月朔,黑气十馀丈,飞入温德殿中。秋七月,有虹现于玉堂,五原山岸,尽皆崩裂。种种不祥,非止一端。帝下诏问群臣以灾异之由,议郎蔡邕上疏,以为蜺堕鸡化,乃妇寺干政之所致,言颇切直。帝览奏叹息,因起更衣。曹节在后窃视,悉宣告左右;遂以他事陷邕于罪,放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸,号为“十常侍”。帝尊信张让,呼为“阿父”。朝政日非,以致天下人心思乱,盗贼蜂起。 ...... ...... </div> <p><b>注释:</b>在 Safari 16 版本中多列布局目前不支持 Gap 属性。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html
CSS 语法
gap: row-gap column-gap|initial|inherit;
值 | 描述 |
---|---|
row-gap | 设置网格或弹性框布局中行之间的间隙大小。 |
column-gap | 设置网格、弹性框或多列布局中列之间的间隙大小。 |
initial | 将此属性设置为其默认值。参阅 initial。 |
inherit | 从其父元素继承此属性。参阅 inherit。 |
技术细节
默认值: | normal normal |
---|---|
继承: | 否 |
动画制作: | 支持。请查看单独的属性。请参阅:动画相关属性。 |
版本: | CSS Box Alignment Module Level 3 |
JavaScript 语法: | object.style.gap="50px 100px" |
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
布局 | Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
在网格中 | 66 | 16 | 61 | 12 | 53 |
在弹性框中 | 84 | 84 | 63 | 14.1 | 70 |
在多列中 | 66 | 16 | 61 | 不支持 | 53 |