columns属性

columns属性是一个简写属性

column-count属性:定义列的数量

column-width属性:定义列的宽度

 

column-count属性用于设置列的数量或者允许的最大列数

auto:默认值，用于表示列的数量由其他css属性决定

number:必须是正整数，用于表示定义列的数量

 

column-width 属性用于设置列的宽度或者列的最小宽度

auto:默认值，用于表示列的宽度由其他css属性决定

length:必须是正整数，用于表示定义列的宽度

 

列的间距

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

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

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

 

列的边框

column-rule属性用于定义列于列之间的边框，其中包括边框宽度，边框颜色以及边框样式

column-rule-width

column-rule-color

column-rule-style

 

横跨多列

column-span属性用于定义一个列元素是否跨列

none:表示元素不跨列

all:表示元素跨所有列

 

列的填充

column-fill属性用于定义列的高度是由内容决定，还是统一高度

auto:默认值，用于表示列的高度由内容决定

balance:用于表示列的高度根据内容最多的一列高度为准

 

<div class="parent">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
    <div class="col4"></div>
</div>
<div class="parent2">
   <div class="col5"></div>
</div>
.parent,.parent2{
   /*column-count: 4;
   column-width: 300px;*/
   columns: 4 300px; /*简写*/

   column-gap:20px;
   column-rule:5px red double; /*设置间隙的边框*/

   column-span:all;
}

.col1,.col2,.col3,.col4,.col5{
   height:300px;
   
}
.col1{
   background:red;
}
.col2{
   background:#ccc;
}
.col3{
   background:orange;
}
.col4{
   background:yellow;
}
.col{
   background:blue;
}