有關CSS3布局排版的講解

　　前提

　　在介紹布局排版之前，我們首先引入一個尺寸單位，這個尺寸單位是在 CSS3 中新引入的，它就是 rem ，所有引用 rem 定義的字型大小都是相對於根項目 文本的大小，相對於使用 em，這種方式將我們從手動計算字型大小的繁瑣過程中解脫出來。

　　效果一

　　demo01.png

　　只要利用 CSS3 提供給我們的新屬性，我們可以很輕易的做出這麼一個效果。下面我們針對用到的幾個主要屬性進行講解。

• 　　column-width : 用於指定列的寬度，一旦指定一個值，瀏覽器會根據當前瀏覽器的寬度，動態決定將內容分為多少列。

• 　　column-rule : 這個屬性是一種簡寫，其實它包含了三個不同的屬性，分別是 column-rule-width, column-rule-style, column-rule-color，反正實現的就是在列之間加上一個分割線，和 border 屬性的設定是相同的。

• 　　column-gap : 用於設定分欄的空隙屬性，這個值由分欄兩側平攤。

　　如果想要實現分欄，我們可以利用 column-width ，也可以使用 column-count 屬性，但是我們通常不這麼做，因為這意味著必須要將內容分成三列，而不考慮當前瀏覽器的寬度，這是非常不友好的設計。

　　知道了以上屬性之後，相信你可以很快的將我們示圖中的效果實現出來，這裡我們不在粘貼原始碼，你可以 點此下載 。這裡需要將一下，我們在頁面中引用了一些好看的字型，如果你也想使用，你住需要將下面這一行代碼粘貼到你的 標籤下即可。

<link href='http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis' rel='stylesheet' type='text/css'>

　　效果二

　　demo02.png

　　這個效果我們使利用 Flexbox 實現的，下面針對用到的幾個屬性進行講解。

• 　　display : 如果想要使用 Flexbox 布局，那麼我們首先要將這個屬性的值設定為 flex。

• 　　flex-flow : 這個屬性其實是兩個屬性的縮寫，其中一個是 flex-direction 用於設定主軸的方向，如果設定為 row 則是一水平方向為主軸，如果為 column 垂直方向為主軸。還有一個屬性是 flex-wrap， 用於設定元素換行，當元素超出父元素寬度時就自動換行，這就可以實現自適應螢幕的效果。

• 　　flex : 這個屬性一般在設定 display 為 flex 的子項目中設定，有三個參數，在這裡不在詳細解釋，因為我也不太能組織語言解釋它，可以百度查看一下該屬性的使用方法。