css3中新出現(xiàn)的多列布局(multi-column)是對html布局模式的有力擴充撞蚕,它能輕松的讓文本呈現(xiàn)多列顯示蝎毡,就像報紙上的新聞排版一樣莹弊。
屬性:
--column-count:設置列的個數(shù)努隙。數(shù)字為想要把文章分為的列數(shù)耕腾,瀏覽器會自動計算每 列的寬度。
?????? 如:將文字分成4列
??????? 代碼如下:
效果如下:
--column-width:設置每列的寬度蓬衡。設置后喻杈,瀏覽器會根據(jù)設置的寬度自動計算調整列數(shù),如果寬度不足兩列狰晚,則只顯示一列筒饰,寬度設置也將失效。
列寬為10rem時:瀏覽器根據(jù)列寬將其分為7列
列寬為10rem時:瀏覽器根據(jù)列寬將其分為3列
列寬為40rem時:瀏覽器寬度不足兩列時壁晒,只顯示1列
---columns:是column-count 和 column-width的簡寫,優(yōu)先保證寬度瓷们,在寬度?至少能達到指定寬度時,設置列列數(shù)秒咐。
除了想要設置列數(shù)和列寬外谬晕,我們有時還想要設置列間隙和列的邊框。
---column-gap(列間隙):建議值為1em
沒有設置列間隙時
設置后
列邊框設置包括邊框的顏色(column-rule-color)携取、線寬(column-rule-width)攒钳、線樣式(column-rule-style)。column-rule是這三個屬性的復合屬性雷滋。
column-rule-width:? thin/medium/thick/具體數(shù)值不撑。
column-rule-color: 顏色。
column-rule-style: dotted/dashed/solid晤斩。
當需要跨列設置時焕檬,我們可以用column-span進行設置
column-span:? 1/all;??????? 默認跨一列
為了保證瀏覽器最大的兼容性問題:我們可以在這些屬性前加上前綴:-webkit-,-moz-,-ms-。
??????