[HTML/CSS]colum-gap属性

属性定义及使用说明

column-gap的属性指定的列之间的差距。

注意： 如果指定了列之间的距离规则，它会取平均值。

 

语法

column-gap: length|normal;

 

值	描述
length	一个指定的长度，将设置列之间的差距
normal	指定一个列之间的普通差距。 W3C建议1EM值

 

 

Flex layout(存在兼容性问题)

HTML

 <div id="flexbox">
   <div></div>
   <div></div>
   <div></div>
 </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

 <div id="grid">
   <div></div>
   <div></div>
   <div></div>
 </div>

CSS

 #grid {
   display: grid;
   height: 100px;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: 100px;
   column-gap: 20px;
 }

 #grid > div {
   border: 1px solid green;
   background-color: lime;
 }

Result

Result

 

 

Multi-column layout

HTML

 <p class="content-box">女流直播和解说的游戏不同于国内常见的流行游戏，以优秀的独立游戏和极具艺术性富含哲理的顶尖大作为主。独立游戏的走向相对地取决于开发者，他们可以做自己想做的游戏而不受限制，所以这类游戏往往带有作者的态度和表达。这类游戏不同于声势浩大的大型游戏，却总能给人带来出乎意料的惊喜。</p>

CSS

 .content-box {
   column-count:;
   column-gap: 40px;
 }

Result

Result