跳到主要内容

多列布局与 gap

column-count 与 column-width 如何控制列数？​

.container {
  column-count: 3; /* integer: 显式列数; auto: 依据 column-width */
  column-width: 120px; /* length: 期望列宽; auto: 依据 column-count */
}

column-rule 如何设置列间隔线？​

  • 作用: 设置列间隔线样式;
  • 成分属性: column-rule-width、column-rule-style、column-rule-color;
  • 取值: 分别同 border-width/border-style/border-color;
.container {
  column-rule: thick inset blue;
}

column-span 如何让元素跨列？​

.container {
  column-span: none; /* 不跨列 */
  column-span: all; /* 跨越所有列 */
}

break-inside 如何控制内部中断？​

.container {
  break-inside: auto; /* 允许中断 */
  break-inside: avoid; /* 避免中断 */
}

gap 如何设置间隙？​

  • 作用: 设置 flex/grid/multiple-column 的 gutters;
  • 成分属性: row-gap、column-gap;
  • 1 值: 行列同为该值; 2 值: row-gap column-gap;
#flexbox {
  display: flex;
  gap: 20px 5px;
}
.columns {
  column-gap: 9px;
}
  • normal: multiple-column 为 1em, 其余布局为 0;