跳到主要内容

核心

2023年02月18日
柏拉文
越努力，越幸运

一、column-count​

column-count 属性,描述元素的列数。

语法

column-count: 3;
column-count: auto;

column-count: inherit;
column-count: initial;
column-count: unset;

取值

  • auto: 用来表示列的数量由其他 CSS 属性指定，例如 column-width

  • <number>: 是个严格的正数 <integer> ，用来描述元素内容被划分的理想列数。假如 column-width 也被设置为非零值，此参数仅表示所允许的最大列数。

场景

  • 场景一、多列布局

    场景背景: 实现 4 列多列布局

    场景解决: 通过 column-count: 4 来实现多列布局

    实时编辑器
    function Test(props) {
  const container = {
    width: "200px",
    columnCount: 4,
    backgroundColor: "red",
  }
  const item = {
    height: "80px",
    backgroundColor: "yellow"
  }
  return (
     <div style={ container }>
       <div style={ item }></div>
       <div style={ item }></div>
       <div style={ item }></div>
       <div style={ item }></div>
     </div>
  );
}
    结果
    Loading...

二、column-fill​

语法

column-fill = 
  auto         |
  balance      |
  balance-all  


column-fill: auto;
column-fill: balance;

/* Global values */
column-fill: inherit;
column-fill: initial;
column-fill: unset;

取值

  • auto:

  • balance:

三、column-gap​

**column-gap**属性用来设置元素列之间的间隔（gutter）大小。column-gap 一开始是 Multi-column 布局 下的特有属性，后来在其他布局中也使用这个属性。如 CSS 盒子对齐中的表述，该属性已经可以在 Multi-column（多列布局）、Flexible Box（弹性盒子）以及 Grid layouts（网格布局）中使用。

语法

/* 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: revert;
column-gap: revert-layer;
column-gap: unset;

取值

  • normal: 表示列之间的间隔宽度。在多列布局时默认间隔为 1em，其他类型布局默认间隔为 0。

  • <length>: 用 <length> 来定义列之间的间隔大小。而且 <length> 值必须是非负数的。

  • <percentage>: 用 <percentage>（百分比）来定义列之间的间隔大小。同样的，<percentage> 值也必须是非负数的。

场景

  • 场景一、多列间隔布局

    场景背景: 实现 4 列多列布局,且有间距

    场景解决: 通过 column-count: 4; column-gap: 24px; 来实现多列间隔布局

    实时编辑器
    function Test(props) {
  const container = {
    width: "200px",
    columnCount: 4,
    columnGap: "24px",
    backgroundColor: "red",
  }
  const item = {
    height: "80px",
    backgroundColor: "yellow"
  }
  return (
     <div style={ container }>
       <div style={ item }></div>
       <div style={ item }></div>
       <div style={ item }></div>
       <div style={ item }></div>
     </div>
  );
}
    结果
    Loading...

四、column-rule​

column-rule 简写属性可以在多列布局中设定分割线的宽度、样式和颜色。该简写属性使用简单方便的声明形式将各个 column-rule-* 属性放在了一起：column-rule-width、column-rule-style 和 column-rule-color。

语法

column-rule = 
  <'column-rule-width'>  ||
  <'column-rule-style'>  ||
  <'column-rule-color'>  


column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;

/* 全局值 */
column-rule: inherit;
column-rule: initial;
column-rule: revert;
column-rule: revert-layer;
column-rule: unset;

取值: column-rule 属性可以按任何顺序指定为下面列出的一个、两个或三个值。

  • <'column-rule-width'>: 定义为 <length> 或是 thin、medium、thick 关键字的其中一个。

  • <'column-rule-style'>: 请参阅 border-style

  • <'column-rule-color'>: 一个 <color> 值。

场景

  • 场景一、多列间隔布局

    场景背景: 实现 4 列多列布局,且有间距

    场景解决: 通过 column-count: 4; column-gap: 24px; 来实现多列间隔布局

    实时编辑器
    function Test(props) {
  const container = {
    width: "200px",
    columnCount: 4,
    padding: "4px",
    columnGap: "0px",
    backgroundColor: "red",
    columnRule: "inset 2px #33f",
  }
  const item = {
    height: "80px",
    backgroundColor: "yellow"
  }
  return (
     <div style={ container }>
       <div style={ item }></div>
       <div style={ item }></div>
       <div style={ item }></div>
       <div style={ item }></div>
     </div>
  );
}
    结果
    Loading...

五、column-rule-color​

column-rule-color 让你可以设置在多列布局中被画在两列之间的规则（线条）的颜色。

语法

column-rule-color = 
  <color>  

column-rule-color: red;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);
column-rule-color: inherit;

六、column-rule-style​

**column-rule-color 让你可以设置在多列布局中被画在两列之间的规则（线条）的样式。

语法

column-rule-style = 
  <line-style>  

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;
column-rule-style: inherit;

七、column-rule-width​

column-rule-width 让你可以设置在多列布局中被画在两列之间的规则（线条）的宽度。

语法

column-rule-width = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           


/* Keyword values */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/* Length values */
column-rule-width: 1px;
column-rule-width: 2.5em;

column-rule-width: inherit;

八、column-span​

column-span 的值被设置为 all 时，可以让一个元素跨越所有的列。一个跨越多列的元素被称为 spanning element。

语法

column-span = 
  none  |
  all   

column-span: none;
column-span: all;

column-span: inherit;

取值

  • none: 元素不跨多个列。

  • all: 元素横跨所有列。元素出现之前，出现在元素之前的正常流中的内容在所有列之间自动平衡。该元素建立一个新的块格式上下文。

九、columns​

columns 用来设置元素的列宽和列数。它是一个简写属性，可在单个方便的声明中设置 column-width 和 column-count 属性。与所有简写属性一样，任何省略的子值都将设置为其初始值。

语法

columns = 
  <'column-width'>  ||
  <'column-count'>  


/* Column width */
columns: 18em;

/* Column count */
columns: auto;
columns: 2;

/* Both column width and count */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

/* Global values */
columns: inherit;
columns: initial;
columns: unset;

取值

  • <'column-width'>: 理想的列宽，定义为 <length> 或 auto 关键字。实际宽度可以更宽或更窄以适合可用空间

  • <'column-count'>: 元素内容应分成的理想列数，定义为 <integer> 或 auto 关键字。如果此值和列的宽度都不是 auto，则它仅指示允许的最大列数。

场景

  • 场景一、多列布局

    场景背景: 实现 4 列多列布局

    场景解决: 通过 columns: 4 auto 来实现多列布局

    实时编辑器
    function Test(props) {
    const container = {
        width: "200px",
        columns: "4 24px",
        backgroundColor: "red",
    }
    const item = {
        height: "80px",
        backgroundColor: "yellow"
    }
    return (
        <div style={ container }>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
        </div>
    );
}
    结果
    Loading...