For AI agents: the complete documentation index is available at /next/zh/llms.txt, the full documentation bundle is available at /next/zh/llms-full.txt, and this page is available as Markdown at /next/zh/api/css/properties/column-gap.md.
Lynx
  • 简体中文

      • column-gap (grid-column-gap)

      介绍

      column-gap/grid-column-gap 属性用来设置弹性布局和网格布局元件列之间的间隙（gutter）大小。

      为了兼容性，可使用 column-gap 或 grid-column-gap。

      使用示例

      css-apisrc/column-gap/App.tsx
      Code
      预览

      语法

      /* <length> values */
column-gap: 20px;
column-gap: 1em;
grid-column-gap: 20px;
grid-column-gap: 1em;

/* <percentage> value */
column-gap: 10%;
grid-column-gap: 10%;

/* calc() values */
column-gap: calc(10% + 20px);
grid-column-gap: calc(10% + 20px);

      取值

      • <length>

      弹性布局或网格布局列之间的间隙宽度。

      • <percentage>

      列之间直接的间隙宽度，相对容器自身 content area 横向大小的百分比。

      形式定义

      初始值0
      适用元素弹性容器和网格容器
      是否支持继承否
      是否支持动画否
      百分比refer to row dimension of its own content area

      形式语法

      column-gap = <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

      与 Web 的区别

      • 不支持 normal。

      兼容性

      LCD tables only load in the browser

      除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。