属性定义及使用说明
column-gap的属性指定的列之间的差距。
注意： 如果指定了列之间的距离规则，它会取平均值。
语法
column-gap: length|normal;
| 值 | 描述 |
|---|---|
| length | 一个指定的长度，将设置列之间的差距 |
| normal | 指定一个列之间的普通差距。 W3C建议1EM值 |
Flex layout(存在兼容性问题)
HTML
1 <div id="flexbox">2 ??<div></div>3 ??<div></div>4 ??<div></div>5 </div>
CSS
#flexbox { ?display: flex; ?height: 100px; ?column-gap: 20px;}#flexbox > div { ?border: 1px solid green; ?background-color: lime; ?flex: auto;}Result
Result
Grid layout(存在兼容性问题)
HTML
1 <div id="grid">2 ??<div></div>3 ??<div></div>4 ??<div></div>5 </div>
CSS
1 #grid { 2 ??display: grid; 3 ??height: 100px; 4 ??grid-template-columns: repeat(3, 1fr); 5 ??grid-template-rows: 100px; 6 ??column-gap: 20px; 7 } 8 ?9 #grid > div {10 ??border: 1px solid green;11 ??background-color: lime;12 }Result
Result
Multi-column layout
HTML
1 <p class="content-box">女流直播和解说的游戏不同于国内常见的流行游戏，以优秀的独立游戏和极具艺术性富含哲理的顶尖大作为主。独立游戏的走向相对地取决于开发者，他们可以做自己想做的游戏而不受限制，所以这类游戏往往带有作者的态度和表达。这类游戏不同于声势浩大的大型游戏，却总能给人带来出乎意料的惊喜。</p>
CSS
1 .content-box {2 ??column-count: 3;3 ??column-gap: 40px;4 }Result
Result
[HTML/CSS]colum-gap属性
原文地址：https://www.cnblogs.com/SoYang/p/10322292.html