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，码农的天堂，欢迎有兴趣的同窗加入