一、课程信息

课程名称：一课全面掌握主流CSS布局

课程章节：第11章 CSS3 多列布局

主讲老师：KingJ

二、课程内容

• 列的数量column-count概念及使用
• 列的宽度column-width概念及使用
• 列的间距column-gap概念及使用
• 列的边框column-rule概念及使用
• 横跨多列column-span概念及使用
• 列的填充column-fill概念及使用

三、课程收获

学习掌握了CSS3多列布局的概念和使用，通过代码演示，更加深刻认识到了CSS3多列布局的使用情景。

1.列的数量

• column-count属性用于设置列的数量或者允许的最大列数
  • auto: 默认值，用于表示列的数量由其他CSS属性决定
  • number: 必须是正整数，用于表示定义列的数量

2.列的宽度

• column-width属性用于设置列的宽度或者列的最小宽度
  • auto: 默认值，用于表示列的宽度由其他CSS属性决定
  • length: 必须是正整数，用于表示定义列的宽度

示例

<div class="parent">
    <div class="col1"><p>1</p></div>  
    <div class="col2"><p>2</p></div>  
    <div class="col3"><p>3</p></div>  
    <div class="col4"><p>4</p></div>  
</div>

css

.parent{
    column-count: 4;
    column-width: 300px;
    /* 简写 */
    /* columns: 4 300px; */
}
.col1,.col2,.col3,.col4{
    height: 300px;
}
.col1{
    background-color: red;
}
.col2{
    background-color: yellow;
}
.col3{
    background-color: blue;
}
.col4{
    background-color: green;
}

3.列的间距

• column-gap属性用于设置列与列之间的间距，该属性需要为多列显示时的元素设置

  • normal: 用于表示使用浏览器定义列的默认间距，默认值为1em

  • length: 必须是正整数，用于表示定义列之间的间距

.parent{
    column-gap: 20px; 
}

4.列的边框

• column-rule属性用于定义列与列之间的边框，其中包括边框宽度、边框颜色以及边框样式
  • column-rule-width属性：用于表示列与列之间的边框宽度
  • column-rule-color属性： 用于表示列与列之间的边框颜色
  • column-rule-style属性： 用于表示列与列之间的边框样式

.parent{
    column-rule-width: 5px;
    column-rule-color: tomato;
    column-rule-style: double;
    /* 简写 */
    /* column-rule: 5px tomato double; */
}

5.横跨多列

• column-span属性用于定义一个列元素是否跨列
  • none: 用于表示元素不跨列
  • all: 用于表示元素跨所有列

示例

<div class="parent">
    <div class="col1"><p>1</p></div>  
    <div class="col2"><p>2</p></div>  
    <div class="col3"><p>3</p></div>  
    <div class="col4"><p>4</p></div>  
</div>
<div class="parent2">
    <div class="col5"><p>5</p></div> 
</div>

css

.parent,.parent2{
    column-count: 4;
    column-width: 300px;
    /* 简写 */
    /* columns: 4 300px; */
}
.col1,.col2,.col3,.col4,.col5{
    height: 300px;
}
.col1{
    background-color: red;
}
.col2{
    background-color: yellow;
}
.col3{
    background-color: blue;
}
.col4{
    background-color: green;
}
.col5{
    background-color: tomato;
    column-span: all;
}

6.列的填充

• column-fill属性用于定义列的高度是由内容决定，还是统一高度(CSS3新增，浏览器兼容性存在问题)
  • auto: 默认值，用于表示列的高度由内容决定
  • balance: 用于表示列的高度根据内容最多的一列高度为准

示例

<div class="parent">
    <div class="col1"><p>1</p></div>  
    <div class="col2"><p>2</p></div>  
    <div class="col3"><p>3</p></div>  
    <div class="col4"><p>4</p></div>  
</div>
<div class="parent2">
    <div class="col5"><p>5</p></div> 
</div>
<div class="parent">
    <div class="col6"><p>6</p></div>  
    <div class="col7"><p>7</p></div>  
    <div class="col8"><p>8</p></div>  
    <div class="col9"><p>9</p></div>  
</div>

css

.parent,.parent2{
    column-count: 4;
    column-width: 300px;
    /* 简写 */
    /* columns: 4 300px; */
}
.col1,.col2,.col3,.col4,.col5{
    height: 300px;
}
.col1,.col6{
    background-color: red;
}
.col2,.col7{
    background-color: yellow;
}
.col3,.col8{
    background-color: blue;
}
.col4,.col9{
    background-color: green;
}
.col5{
    background-color: tomato;
    column-span: all;
}
.col6,.col7,.col8,.col9{
    column-fill: balance;
}

四、学习截图