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;