網頁設計CSS網頁布局:CSS網頁布局的未來

文章簡介：大家都知道，css有著奇妙的特性，然而讓人失望的是，css對基本頁面布局上的支援有所欠缺。但是這種情況正在得到改變，更多的動態網頁面正是由css所支援的，正如peter gasston所說的。

在這裡，我能夠保證在數年之後，css3必定能夠引領潮流。一攬子的前端工具正在應運而生，方便為我們帶來rounded corners圓角，gradients漸層，opacity透明度，transformations，transitions，animations，甚至更多效果。但是現在我們都有了fun stuff，eye candy，還有需要什麼呢？

下一個我們需要面對的就是關於定位css3的布局問題，雖然現在我們在可以使用float，relative定位，負值margin進行定位，但是我們仍然很難在多欄目的布局上大展身手。

W3C組織以及瀏覽器製作商意識到了這個問題，也推出了一攬子解決方案。其中的主力軍是IE團隊。IE10就好比步入css布局新時代的先驅者，它讓我們的網站變得更加豐富多彩，靈活多變，吸引大家的眼球。

在這篇文章當中，我將為大家從優秀實用到純粹理論階段中介紹有關css布局的工具，也許在這些階段中你不一定用得到他們，（至少不是現在），但仍然還很有必要去瞭解，通過這樣可以透過迷霧，看清未來。如果你需要在這個文章當中對這些工具需要更多細節的介紹，或者更多介紹css3的內容，可以向大家推薦 這本書。

多欄版面配置（Columns）

在多欄目中分配好內容是排版的重中之重，CSS Multi-Columns module同樣能夠為我們在網頁上實現自適應的效果。下面有兩種方法實現欄目的布局，值得一提的是這兩種方法都採用了不同的屬性（而且他們都需要有個乾爹罩著-父級容器）。第一個方法就是直接指定，也就是說你直接指明需要在文本當中設定的欄目列數就行了。下面的代碼能夠產生三欄的文本，其寬度大小填滿了父級的寬度。

div { column-count: 3; } 

第二個方法比較靈活，首先欄目的寬度是固定的，而且其欄目的數目會一直增加直到填滿父級寬度為止，舉個例子吧，我設定欄目的寬度為140px，如果其父級寬度為800px的時候，那麼這將會產生的欄目數為5個。

div { column-width: 140px; } 

在預設的情況下，每個欄目之間的間隔長度是1em，但是你可以通過column-gap這個屬性來進行改動。同樣，你也可以在column-rule對column進行樣式上的修改，我們可以回想到border這個屬性也有著同樣的寫法規則。下面這個代碼語句產生一個寬度為2px的虛線，而且column的間隔為28px-為大家展示了另一種的規則。

div {   column-gap: 28px;   column-rule: 2px dotted #ccc; } 

如果你想看看效果如何，狠狠點擊 這裡吧。對了，你需要在firefox，chrome，safari，opera11.1或者ie10的平台下才能得到正常的顯示；如果你沒有上面所說的瀏覽器，那你就看看下面的效果圖片吧。

在一個水平空間上分割塊狀內容的時候css的columns屬性為你提供了非常便捷的方法。

其實圍繞著column你還可以做更多事情，但是文章篇幅有限，不能為你一一說明。如果你希望看到一個實際的例子，引用維基百科的一些例子這裡可以滿足你，在這裡使用了column-count屬性把文章分成了三欄，在Firefox上multi-column的使用需要添加-moz-的首碼，在Chrome和Safari上則需要使用-webkit-首碼， opera11.1+以及ie10就不用添加首碼。

擴充閱讀

1. CSS Multi-column Layout Module
2. CSS3 Multi-columns 之列數和列寬
3. CSS3 Multi-columns 之column-gap column-rule
4. CSS3 Multi-columns 之跨列
5. Multiple Columns Layout (Magazine-Alike) With CSS3
6. CSS3 Multi-column layout
7. An (Almost) Complete Guide to CSS3 Multi-column Layouts
8. Using CSS multi-column layouts
9. Multi-Column Layouts Climb Out of the Box

——大漠

伸縮性盒模型（Flexible box）

Flexible Box Layout module（flexbox）為大家提供了一個在父級容器中不用考慮具體height和width數值的自適應方法。舉個簡單的例子來說吧，想象你有兩個子級元素，你希望他們都能夠以相同的寬度一起來填滿他們的父級寬度。你也許能夠使用百分比來實現，但是一旦要把border，padding，margins考慮進來的時候，情況就複雜多了。Flexbox的出現便讓這個問題不再成為問題：

.parent { display: flex; } .child-one, .child-two { flex: 1; } 

簡單地放置兩個子級元素水平排列在父級容器當中，同時使其寬度一致。flex的數值實際上就是比例的意思，在這些子級元素當中按比例地重新分配空出來的空間在他們的寬度；好吧，多說沒用，上代碼！

.child-one { flex: 1; } .child-two { flex: 2; } 

當這兩個子級元素的寬度都在父級容器中都得到分配的時候，.child-two的寬度將會以剩餘空間的三分之二得到補充，.child-one的寬度將會以剩餘空間的三分之一得到補充；所以，如果他們的父級為260px寬，每個欄目首先被賦予了100px寬度，多出來的60px將會有40px的寬度分配到child-one上，而20px的寬度將被分配到child-two上。

一例勝百言，點擊在 這裡,你會把這個知識點看的更加清楚（你需要firefox，chrome，safari，或者ie10+）.你還可以嘗試改變瀏覽器視窗的大小來看看有什麼變化。

正如能夠動態改變一個容器的尺寸大小，FlexBox對父級容器提供屬性支援控制多餘的空間分配，也可以對該子級元素進行定位。justify-content屬性作用在子級元素的寬度（這是預設情況下的，可以改變）.然後justify-content還有個兄弟屬性，align-items，他作用在高度上，下面為你展示下，他們是如何?效果的：

.parent {   justify-content: center;   align-items: center;   display: flex;   height: 200px;    width: 100px; } .child {   flex: 0;   height: 100px;    width: 100px; } 

.child的flex數值為0所以它不會有什麼動態尺寸變化，他的寬度高度都是父級容器的一半，因此，該子級元素將被定位在水平，垂直方向上的中心位置。

在.net雜誌中一篇叫The CSS3 Flexible Box model explained的文章當中，你能瞭解更多關於Flexbox的東西。加上相關的首碼（-moz-.webkit-,-ms-）你能夠在相應的firefox，chrome，safari，以及ie10pp各大瀏覽器平台中使用flexbox屬性，在JS Polyfill, Flexie這個網站當中，你還能進行關於flexbox的嘗試。我們要注意的是代碼也是靈活多變的；點擊這裡你還能瞭解更多版本規範。

譯文中的代碼已做修改，有關於更多的資訊查閱原文，或者閱讀下面的擴充閱讀。

擴充閱讀

1. 一個完整的Flexbox指南
2. 深入瞭解 Flexbox 伸縮盒模型
3. IE10中的Flexible Box("Flexbox")布局
4. “老”的Flexbox和“新”的Flexbox
5. 使用Flexbox：新舊文法混用實現最佳瀏覽器安全色
6. 跨瀏覽器的Flexbox
7. 看看接下來會發生什麼：CSS3 Flexible Boxes
8. 響應式設計的未來——Flexbox
9. 使用CSS3 Flexbox布局
10. Flexbox——快速布局神器
11. Flexbox中動畫內幕
12. CSS3實現水平垂直置中

——大漠

網格(Grid)

Brand new to IE10PP）最值得稱道的地方就是Grid Layout系統，這也是我最感到興奮的地方。這是第一次使用columns和rows來定義我們的網格。其中我們可以使用寬度數值，關鍵詞auto，以及一個新的長度單位，fr（fracion的縮寫）。多說沒用，翠花，上代碼！

div {   display: grid;   grid-columns: 1fr 3fr 1fr;   grid-rows: 100px auto 12em; } 

上面的代碼能夠為我們帶來一個三列的網格，其中最中間的欄目的寬度是左右兩側邊欄目的三倍，第一行的高度為100px，最後一行的高度是12em，中間的行高自動調整，以剛好填滿整個欄目的大小。

網格確定了之後，我們就能在裡面定位其中的內容了，利用一些section 標籤我建立了一個簡單的頁面配置，下面就是代碼：

header {    grid-column: 1;    grid-column-span: 3;    grid-row: 1;  } nav {    grid-column: 1;    grid-row: 2;  } article {    grid-column: 2;    grid-row: 2;  } aside {    grid-column: 3;    grid-row: 2;  } footer {    grid-column: 1;    grid-column-span: 3;    grid-row: 3;  } 

看著這些代碼，你肯定會發現這些都採用了columns和rows，也就是grid-column和grid-row屬性；在article的元素標籤中，我把他放在了網格中的第二行，第二列，這個位置也就是在3*3網格的中心地帶。同樣的，我在header和footer標籤當中使用了grid-column-span，這個代碼讓他們有了橫跨三列欄目的勇氣和能力，（grid-column-span也有著類似的功能，只是在這裡就不引用了哈。）

我做過一個關於這些屬性的布局例子，點 這裡看看吧，但是這需要你用IE10PP這個平台來開啟他。如果你沒有這個瀏覽器，那你就看看下面的效果圖吧。

這些屬性都在IE10pp得到支援，因此你可以拿來自己實驗實驗，在技術文檔中當中還有很多屬性也是得到IE10PP支援的，所以說前景非常光明，敬請期待。

擴充閱讀

1. Grid
2. CSS3 Grid Layout
3. 使用CSS3 Grid布局實現內容優先
4. CSS3網格布局介紹——網格的運行
5. 如何使用CSS網格建立一個調適型配置
6. CSS Grid Layout
7. IE10 and the Future of CSS Layout
8. CSS Grid Layout
9. Understanding the Difference between CSS3 Flexbox & Grid Layout
10. FUTURE OF CSS LAYOUT: CSS GRID
11. Farewell Floats: The Future of CSS Layout
12. Master the new CSS layout properties

——大漠

模板（Template）

另一個支援網格系統的就是Template Layout module。採用了不同的文法，第一步工作就是對position屬性進行賦值，這些值就是按順序排列下去的字母。上代碼！

header { position: a; } nav { position: b; } article { position: c; } 

我們搞定了這些posiiton工作之後，我們就可以通過這一連串的字母進行布局；每一串字母就代表著一行，每個字母就代表著一列；一例勝百言，弄一個一行三列的網格，你需要這麼做，上代碼！

div { display: "abc"; } 

這樣，在一個水平行中你就可以顯示出三個空間大小一樣的元素了。同樣，你可以重複字母，這樣你就能夠進行跨列顯示了，如果你在不同字串的相同位置使用相同的字母，那麼你就能夠進行跨行顯示了，下面的例子就是說明了nav元素跨行顯示，header，article跨列顯示，上關鍵代碼！

div { display:         "baa"         "bcc"; } 

Template Layout在目前為止沒有被瀏覽器所支援，但是有個jQuery polyfill by Alexis Deveria能夠讓其得到支援。我就是依靠這個搗鼓出的這個例子,該效果跟Grid Layout的一模一樣，然而其中的代碼方法確實一點都不同。

這個例子運用了js所以他能夠被絕大多數的現代瀏覽器所支援，但是你還是在瀏覽器看不到效果的話，那麼你可以上拉回去看看介紹Grid Layout所貼出來的效果圖參考參考，因為這效果圖是一模一樣的。同樣，我記得我說過Grid Layout module博大精深？好吧，下面關於Template的語句中有包含其中的代碼，不多說，上代碼!

header { grid-cell: a; } article { grid-cell: b; } div {   display: grid;   grid-template: "a" "b"; } 

上面的代碼實現了跟Template layout屬性 一樣的效果，而且同樣也有著不被廣泛支援的命運，但我們都知道，明天肯定不會一成不變。

擴充閱讀

1. CSS Template Layout Module
2. CSS Template Layouts: A Simpler CSS Layout System, Now Possible With JQuery

——大漠

浮動定位

當前的float屬性讓我們的文本相對於一個元素向左或者向右浮動顯示，但是在 IE10PP內的擴充屬性,帶著我們走得更遠，我們可以定位浮動元素在我們想要的地方，而且其兄弟元素依然能夠圍繞在他們身旁。這需要float中的一個新的值，以及一些定位屬性，上代碼：

div {   float: positioned;   left: 200px;    position: absolute;    top: 100px;    width: 250px; } 

這段代碼將會產生一個250px寬度的元素，而且這個元素的位置為距離父級容器最左邊的200px處，以及最頂端的100px處。在預設情況下，其兄弟元素將會浮動在其的周圍，但是你可以利用wrap-type屬性進行改動，就好像下面的代碼控制了文本只能在元素的上方和下方顯示：

div { wrap-type: top-bottom; } 

同樣地，你可以把Position Float和Grid Layout module結合起來，在網格中確定元素的位置之後，安排其他元素在它周圍顯示，上代碼：

div {   float: positioned;   grid-column: 2;   grid-row: 2; } 

Position Float是被IE10PP所支援的，所以你可以馬上運用上他了，下面還有個demo，不過需要在IE10的平台下正常查看，如果你沒有IE10平台，那麼你就看看下面的效果圖聊以自慰吧。

Floats and Positioning規範所能夠做的確實比我在這裡展示的多，更多的屬性，包括shaped floats，或者image masks的floats；雖然說，目前為止，沒什麼瀏覽器支援這些東西，但是在各大瀏覽器下一個版本到來的時候，你一定會看到關於這方面的更多支援。

Exclusions

Positioned Floats在標籤box-shaped的協助下能夠使得文本得以流動，不過我要說的是，shaped float可以在技術文檔中查閱。這個想法來源於Adobe公司的一個模組：CSS Exclusions。在這個模組中有兩個關鍵的屬性；第一個就是wrap-float，它可以使得你建立橢圓，矩形，多邊形，並以這些形式來進行浮動，上代碼！

div { wrap-shape: circle(50%, 50%, 100px); } 

這個代碼能夠產生一個半徑為100px的圓，並且在父級容器的中心顯示出來。你同樣能夠利用polygn（）來建立任何你想要的形狀，用空格來顯示一個組的縱，橫座標，一個三角形的代碼如下顯示：

div { wrap-shape: polygon(0,100px 100px,100px 50px,0); } 

當你得到了你的形狀的時候，你能夠通過使用第二個屬性wrap-shape-mode來使得內斂元素圍繞顯示在原來的元素當中，當然了這些內嵌元素需要和你的定位元素有共同的父級容器。上代碼！

div {   wrap-shape: circle(50%, 50%, 100px);   wrap-shape-mode: around; } 

你可以通過下載來查看這個css的拓展功能，這個網站上有完整的技術說明，以及一些讓人印象深刻的執行個體，其中一個的效果如下圖所示。

正如上面所提到的，Exclusions文法已經被Floats模組接納，所以很有可能在以後會以一個拓展的內容來展示給我們，而不是一個獨立的新內容。

擴充閱讀

1. CSS Floats and Positioning Level 3

——大漠

Regions

來自Adobe的一個更加兇猛的支援：CSS Regions，在一個多檔案中提供一個自適應內容。在第一次的聲明就確定了，在float屬性中設定一些獨特的字串作為數值，然後在content屬性中利用from（）功能中指定自適應的地區，說得有點亂七八糟，上代碼：

.content { flow: foo; } .target1, .target2 { content: from(foo); } 

看代碼，就相當簡單，類名叫.content的內容，首先是放在類名叫.target1的元素中，如果內容溢出了，那麼繼續放在.target2中。為了清楚顯示，所以在兩個target元素中不會出現重複的內容，他開始於target1，如果有需要的話在target2中得到補充。一圖勝百言，上圖！

隨便提一下，這兩個target不需要在html文檔中相互緊挨在一起；如果有需要的話，他們有可能在一個頁面的兩端顯示。

然而，Regions這個用法還沒有被瀏覽器所普遍支援，面對這種情況，你可以從Adobe Labs中下載這個屬性 ，自己來嘗試一下。

擴充閱讀

1. CSS Regions Module Level 1
2. Diving Into CSS Regions
3. Regions
4. CSS Regions
5. Using CSS Regions to flow content through a layout
6. CSS3 Regions And Flow
7. CSS3 regions: Rich page layout with HTML and CSS3
8. CSS Regions
9. Introducing CSS Regions
10. Regions

——大漠

結論

FlexBox和Columns這兩個內容，我也不敢確定在新的布局模組中被瀏覽器完全支援。我還要說的是，Positioned Floats 和 Exclusions 這兩個模組非常接近，很大機率被合并。在IE10中Grid Layout則把Template Layout包含起來了。Regions 已經被webkit所支援了，因此很快地已經出現在webkit瀏覽器中（safari，Chrome）。

因此，我感覺一些文法上即將會發生改變，在這裡你所看到的效果，即將出現在將來的CSS3效果當中。如果這成為現實，我想這絕對是個好情況；這些新的方法將會是個對CSS3很好的補充和完善，在數年之後，我們即使建立一個複雜的網站都是非常簡單輕鬆的了。

感謝Oli Studholme對這篇文章的專業評價

一篇類似的，關於css布局且具有前瞻性的　文章。

譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！

如需轉載煩請註明出處：

英文原文：http://www.netmagazine.com/features/future-css-layouts