[HTML/CSS]colum-gap属性
程序员文章站
2022-03-25 13:33:56
属性定义及使用说明 column-gap的属性指定的列之间的差距。 注意： 如果指定了列之间的距离规则，它会取平均值。 语法 column-gap: length|normal; Flex layout(存在兼容性问题) HTML 1
2 ......
属性定义及使用说明
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
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
multi-column layout
html
1 <p class="content-box">女流直播和解说的游戏不同于国内常见的流行游戏，以优秀的独立游戏和极具艺术性富含哲理的顶尖大作为主。独立游戏的走向相对地取决于开发者，他们可以做自己想做的游戏而不受限制，所以这类游戏往往带有作者的态度和表达。这类游戏不同于声势浩大的大型游戏，却总能给人带来出乎意料的惊喜。</p>
css
1 .content-box {
2 column-count: 3;
3 column-gap: 40px;
4 }
result