css3多列布局

css多列布局

colmns属性

• columns属性是一个简写属性
  • column-count属性：定义列的数量或者允许的最大列数
    • auto 为默认值，用于表示列的数量由其他css属性决定
    • number 必须是正整数，用于定义列数量
  • column-width属性：定义列的宽度
    • auto 为默认值，用于表示列的数量由其他css属性决定
    • lenght 必须是正整数，用于定义列的宽度

column-gap属性

column-gap属性定义用columns属性设置的列后的间距

column-gap

• normal 规定列间间隔为一个常规的间隔。W3C 建议的值是 1em
• length 必须是正整数，把列间的间隔设置为指定的长度

column-rule属性

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

• column-rule-width 设置边框的宽度
• column-rule-style 设置边框线条的样式
• column-rule-color 设置边框的颜色

注意：只是间隙中的边框，并不是围绕上下左右

column-span 横跨多列属性

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

• none:用于表示元素不跨列
• all 用于表示元素跨所有列
• 1 用于表示元素跨一列

column-fill 列的填充属性

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

• auto 默认值，用于表示列的高度由内容决定
• balance 用于表示列的高度根据内容最多的一列为准

瀑布流断裂问题

break-inside:aviod;