屬性定義及使用說明
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 }