CSS3中的網格

在這篇文章中，咱們未來看一些CSS3新屬性，從而用HTML和CSS處理網格的時候更容易。但首先讓咱們討論一點HTML和CSS網格的歷史，瞭解清楚爲何之前很困難。

網格簡史

曾幾什麼時候，咱們的佈局是一團糟。表格和框架是用於建立多列布局的主要工具。雖然他們能完成工做（但其實很是糟糕）。

把目光投向今天。HTML和CSS已經變得很是複雜，Web設計的知名度和複雜度與日俱增。咱們曾經使用的舊的佈局方法顯然已經out了。然而，一個歷史遺留問題浮出水面：多列布局。

更復雜的是，咱們的頁面寬度再也不是靜態的。響應式大行其道，因此咱們傾向於基於百分比的列寬。基於固定960像素寬的簡單網格已經行不通——咱們須要流體網格。

CSS2規範中用浮動解決列的方法存在一個問題。爲了防止父元素破環你的佈局，咱們須要添加clearfix。經過這種方法，來修正父元素的高度坍塌問題（浮動元素脫離標準流，父元素會認爲浮動資源不存在）。咱們大部分接受這種方法，但許多人仍然認爲它是一種hack（奇技淫巧）。

經過inline-box的方法並不常見，但仍然存在。內聯元素會保持在一行，他們天然順序排列。當一行被佔滿，後面的元素天然折到下一行。但由於他表現爲文本特性，其行爲相似文本。這意味着你必須避免HTML元素之間的空白元素(空格，tab，換行……)。Inline-block不是爲這設計的，不且工做的並不十分如意。

在這兩種方法中，浮動的方法更可靠。這就是爲何它更流行，排在第一位。然而，建立多列後，咱們發現須要再次壓縮內容，由於咱們須要一些填充距離。這就引出最終的問題：盒模型

盒模型是什麼，簡單來講，一個元素的實際尺寸包括：高度/寬度+內邊距+邊的寬度。外邊據並不使盒子變大，僅僅在本身和其餘元素之間增長空隙。因此設置寬度時,好比25%，其盒子的實際寬度比這大得多，這意味着在一行沒有足夠的空間放下四個元素。

這煩人的問題有不一樣的解決方案：負外邊距，嵌套元素——我知道的所有了。他們都須要額外的CSS或DOM元素，算做hack方法。讓咱們面對現實，CSS2中沒有解決網格的好方法。

然而今天，CSS3提供很好的支持，規範增長了專門用於網格的幾個新特性。這些特性都有哪些？咱們如何使用他們？讓咱們看一看。

box-sizing: border-box

已經解決的問題之一是擴展盒模型的性質。經過設置box-sizing的值爲border-box能夠解決這個問題。經過減小內容寬度使邊和內邊距的距離也算到width屬性裏。

HTML

<div class="row">
  <div class="column">Col one</div>
  <div class="column">Col two</div>
  <div class="column">Col three</div>
  <div class="column">Col four</div>
</div>

CSS

.row:after {
  clear: both;
  content: '';
  display: block;
}

.column {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
  float: left;
  min-height: 8em;
  overflow: hidden;
  padding: 2em;
  width: 25%;
}

.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }

Demo

雖然這工做的很棒，但咱們仍然須要使用浮動，咱們仍然須要清除浮動。此外，咱們咱們只能使用內邊距做爲元素的空間，外邊距再也不起做用。這意味着在快元素之間沒有實際的空間，而是它的內容。雖然這對不少設計很是有用，但仍然以爲它是個小錯誤。

• Firefox 1
• Chrome 1
• IE 8
• Opera 7
• Safari 3

width: calc(百分比 – 距離)

另外一個偉大的選擇是使用calc()函數。他容許咱們在不依賴JavaScript的狀況下計算元素的真實寬度——能夠是不一樣的單位！

HTML

<div class="row">
  <div class="column">Col one</div>
  <div class="column">Col two</div>
  <div class="column">Col three</div>
  <div class="column">Col four</div>
</div>

CSS

.row { margin-left: -1em; }

.row:after {
  clear: both;
  content: '';
  display: block;
}

.column {
  float: left;
  margin-left: 1em;
  min-height: 8em;
  padding: 1em;
  width: -webkit-calc(25% - 3em);
  width: -moz-calc(25% - 3em);
  width: calc(25% - 3em);
}

.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }

Demo

從新計算實際尺寸的能力是一個偉大的選擇，但不幸的的是，咱們仍然須要浮動，咱們也須要列的容器爲負外邊距。同上，一個很棒的選擇，但仍然有些瑕疵。

• Firefox 4
• Chrome 19
• IE 9
• Opera ?
• Safari 6 (appears to be a little buggy)

Flexbox

伸縮佈局盒是有特定配置行爲的元素——有點像表格。這是真的嗎？是的沒錯。表格的行爲實際上至關棒，由於它的顯示依據它的內容而變化。但如今已經再也不使用表格佈局，因此表格標籤不是一個選項。

起初，伸縮盒看起來有待年複雜。有不少很難理解的屬性，尤爲像我這樣不擅用英語演講的人。幸運的是，Chirs Coyier寫了一個 關於伸縮盒的偉大指導，我必須提到。

HTML

<div class="row">
  <div class="column">Col one</div>
  <div class="column">Col two</div>
  <div class="column">Col three</div>
  <div class="column">Col four</div>
</div>

CSS

.row {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -webkit-justify-content: space-between;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.column {
    margin: 0.5em;
    min-height: 8em;
    padding: 1em;
    width: 25%;
}

.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }

Demo

就這麼簡單！但……瀏覽器的支持不是很好。

• Firefox 18
• Chrome 21
• IE 10
• Opera 12.10
• Safari 6.1

結論

儘管CSS3帶來了許多新特性而且修復了一些歷史遺留問題，在我看來，伸縮盒佈局是用CSS建立彈性網格的惟一非hack方法。然而，不幸的是瀏覽器的支持表現平平。儘管如何，其餘方法豐富了表現，因此他們是一個進步，而且他們有很好的瀏覽器支持。

注

原文：http://flippinawesome.org/2014/03/03/grids-in-css3/

Q羣推薦

CSS家園188275051，CSS開發者的天堂，歡迎有興趣的同窗加入

GitHub家園225932282，GitHub愛好者的天堂，歡迎有興趣的同窗加入

碼農之家 203145707，碼農的天堂，歡迎有興趣的同窗加入