column-gap¶
Свойство column-gap
задаёт расстояние между колонками в многоколоночном тексте.
Flexbox и выравнивание
Колонки и таблицы
Синтаксис¶
/* Keyword value */
column-gap: normal;
/* <length> values */
column-gap: 3px;
column-gap: 2.5em;
/* <percentage> value */
column-gap: 3%;
/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: unset;
Значения¶
Значение по-умолчанию: normal
Применяется к: колонкам, флексам, гридам
<размер>
- Значение ширины межколоночного интервала в единицах CSS (например, пикселах).
normal
- Межколоночный интервал устанавливается браузером.
Спецификации¶
Примечания¶
Firefox поддерживает свойство -moz-column-gap
.
Safari, Chrome и Аndroid поддерживают свойство -webkit-column-gap
.
Поддержка браузерами¶
Описание и примеры¶
Flex¶
<div id="flexbox">
<div></div>
<div></div>
<div></div>
</div>
#flexbox {
display: flex;
height: 100px;
column-gap: 20px;
}
#flexbox > div {
border: 1px solid green;
background-color: lime;
flex: auto;
}
Grid¶
<div id="grid">
<div></div>
<div></div>
<div></div>
</div>
#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;
}
Колонки¶
<p class="content-box">
This is some multi-column text with a 40px column gap created with the CSS
`column-gap` property. Don't you think that's fun and exciting? I sure do!
</p>
.content-box {
column-count: 3;
column-gap: 40px;
}