CSS並不簡單:多欄佈局(Multi-Columns Layout)

多欄佈局是CSS3新增佈局中的一種,儘管它很低調。css

1、明確結構

  多欄佈局的結構很簡單,主要由multi-column container和column box組成。html

  當一個元素設置了column-width和column-count屬性而且值不爲auto,那麼這個元素就是multi-column container。git

  multi-column container內部經過多個column box來展現內容。github

2、瞭解基本用法

一、column-count和column-width

  經過這兩個屬性,咱們能夠控制分欄的數目,可是相比較count屬性,width屬性就顯得很靈活。佈局

  當設置width屬性以後,並非說分欄的寬度就是這個固定的值,它還會結合分欄佈局容器中的寬度靈活的多增少減。flex

內容的排列順序

二、column-rule和column-gap

  這兩個屬性主要幫助咱們設置分欄之間的間隙以及分欄的樣式,仍是比較好理解的:網站

分欄間隔以及樣式

  這裏你能夠將column-rule的寬度設置的大一些,會有驚奇的發現哦。ui

三、column-span

  這個屬性和table中的span屬性差很少,可是它只有none和all兩個值,而且它先後的內容都得按照分欄佈局規則從新排列。spa

column-span效果

3、淺談應用

  掌握基礎結構和用法以後,如今能夠對一篇文章進行漂亮的排版了:3d

文章排版

  看起來的確不錯,可是感受有那麼點怪。

  怪在哪裏呢?由於你幾乎不會看到展現文章的網站中採用這種方式排版。(爲了驗證這一點特意查看了大部分的雜誌或者新聞網站)。

  其實看到這種多欄佈局,我第一時間想到的是古書的排版,那麼咱們能夠採用這種分欄佈局實現古書的排版方式:

.demo {
    width: 300px;
    margin: 100px auto;
    columns: 10;
    column-rule: 1px dashed rgb(213,213,213);
    direction: rtl;
    word-wrap: break-word;
    text-align: center;
  }
複製代碼

採用多欄佈局的古書風格

  在採用多欄佈局的方式實現這種效果時須要注意:

  • 每一欄的寬度必須控制在一個字左右,因此這裏對於容器的寬度有嚴格的要求;
  • 經過word-wrap: break-word屬性使中文的標點符號換行;

  那麼不用多欄佈局是否也能實現上述的排版呢?固然能夠!而且咱們又要認識一個新的CSS3成員 -- writing-mode:

.demo {
    width: 180px;
    margin: 50px auto;
    height: 170px;
    line-height: 30px;
    font-size: 16px;
    letter-spacing: 1px;
    writing-mode:vertical-rl;
    background: repeating-linear-gradient(to left, #000, #000 3%, #FFF 3%, #FFF);
    background-size: 30px 100%;
  }
複製代碼

writing-mode結合漸變背景

  這裏惟一值得詬病的就是分欄的樣式不能像分欄佈局中的column-rule那樣靈活的變更。

  CSS老是給人很神奇的感受,接下來咱們用多欄佈局實現九宮格佈局:

多欄佈局實現九宮格

  它最大的缺點已經經過圖中的數字展現的清清楚楚,實際上在實現這樣的佈局時,特別須要注意的就是子元素垂直方向margin形成的影響,這個就留給讀者本身去實踐吧。

4、總結

  做爲CSS3中新增的佈局方式,相比較並無flex那麼引人注目,主要因爲它解決的痛點相對比較的偏,可是從上述實現的九宮格佈局不難看出它仍是能搞點事情的。

相關文章
相關標籤/搜索