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
::: tran-result 已经解决的问题之一是扩展盒模型的性质。通过设置box-sizing的值为border-box可以解决这个问题。通过减少内容宽度使边和内边距的距离也算到width属性里。 :::
HTML
:::: {#highlighter_672461 .syntaxhighlighter .xml} ::: toolbar :::
+------------------------------------+------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | <{.xml .plain}div{.xml |
| | .keyword} class{.xml |
| ::: {.line .number2 .index1 .alt1} | .color1}={.xml |
| 2 | .plain}"row"{.xml |
| ::: | .string}>{.xml .plain} |
| | ::: |
| ::: {.line .number3 .index2 .alt2} | |
| 3 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.xml .spaces}<{.xml |
| | .plain}div{.xml |
| ::: {.line .number4 .index3 .alt1} | .keyword} class{.xml |
| 4 | .color1}={.xml |
| ::: | .plain}"column"{.xml |
| | .string}>Col one</{.xml |
| ::: {.line .number5 .index4 .alt2} | .plain}div{.xml |
| 5 | .keyword}>{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number6 .index5 .alt1} | ::: {.line .number3 .index2 .alt2} |
| 6 | {.xml .spaces}<{.xml |
| ::: | .plain}div{.xml |
| | .keyword} class{.xml |
| | .color1}={.xml |
| | .plain}"column"{.xml |
| | .string}>Col two</{.xml |
| | .plain}div{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number4 .index3 .alt1} |
| | {.xml .spaces}<{.xml |
| | .plain}div{.xml |
| | .keyword} class{.xml |
| | .color1}={.xml |
| | .plain}"column"{.xml |
| | .string}>Col three</{.xml |
| | .plain}div{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number5 .index4 .alt2} |
| | {.xml .spaces}<{.xml |
| | .plain}div{.xml |
| | .keyword} class{.xml |
| | .color1}={.xml |
| | .plain}"column"{.xml |
| | .string}>Col four</{.xml |
| | .plain}div{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number6 .index5 .alt1} |
| | </{.xml .plain}div{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | ::::::::: |
+------------------------------------+------------------------------------+
::::
CSS
:::: {#highlighter_800927 .syntaxhighlighter .css} ::: toolbar :::
+--------------------------------------+------------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::::::::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | .row:after {{.css .plain} |
| | ::: |
| ::: {.line .number2 .index1 .alt1} | |
| 2 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.css .spaces}clear{.css |
| | .keyword}: {.css .plain}both{.css |
| ::: {.line .number3 .index2 .alt2} | .value};{.css .plain} |
| 3 | ::: |
| ::: | |
| | ::: {.line .number3 .index2 .alt2} |
| ::: {.line .number4 .index3 .alt1} | {.css .spaces}content{.css |
| 4 | .keyword}: {.css .plain}''{.css |
| ::: | .string};{.css .plain} |
| | ::: |
| ::: {.line .number5 .index4 .alt2} | |
| 5 | ::: {.line .number4 .index3 .alt1} |
| ::: | {.css .spaces}display{.css |
| | .keyword}: {.css .plain}block{.css |
| ::: {.line .number6 .index5 .alt1} | .value};{.css .plain} |
| 6 | ::: |
| ::: | |
| | ::: {.line .number5 .index4 .alt2} |
| ::: {.line .number7 .index6 .alt2} | }{.css .plain} |
| 7 | ::: |
| ::: | |
| | ::: {.line .number6 .index5 .alt1} |
| ::: {.line .number8 .index7 .alt1} | |
| 8 | ::: |
| ::: | |
| | ::: {.line .number7 .index6 .alt2} |
| ::: {.line .number9 .index8 .alt2} | .column {{.css .plain} |
| 9 | ::: |
| ::: | |
| | ::: {.line .number8 .index7 .alt1} |
| ::: {.line .number10 .index9 .alt1} | {.css |
| 10 | .spaces}-webkit-box-sizing: border-box;{.css |
| ::: | .plain} |
| | ::: |
| ::: {.line .number11 .index10 .alt2} | |
| 11 | ::: {.line .number9 .index8 .alt2} |
| ::: | {.css |
| | .spaces}-moz-box-sizing: border-box;{.css |
| ::: {.line .number12 .index11 .alt1} | .plain} |
| 12 | ::: |
| ::: | |
| | ::: {.line .number10 .index9 .alt1} |
| ::: {.line .number13 .index12 .alt2} | {.css |
| 13 | .spaces}box-sizing: border-box;{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number14 .index13 .alt1} | ::: {.line .number11 .index10 .alt2} |
| 14 | {.css .spaces} |
| ::: | ::: |
| | |
| ::: {.line .number15 .index14 .alt2} | ::: {.line .number12 .index11 .alt1} |
| 15 | {.css .spaces}float{.css |
| ::: | .keyword}: {.css .plain}left{.css |
| | .value};{.css .plain} |
| ::: {.line .number16 .index15 .alt1} | ::: |
| 16 | |
| ::: | ::: {.line .number13 .index12 .alt2} |
| | {.css .spaces}min-height{.css |
| ::: {.line .number17 .index16 .alt2} | .keyword}: {.css .plain}8em{.css |
| 17 | .value};{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number18 .index17 .alt1} | ::: {.line .number14 .index13 .alt1} |
| 18 | {.css .spaces}overflow{.css |
| ::: | .keyword}: {.css .plain}hidden{.css |
| | .value};{.css .plain} |
| ::: {.line .number19 .index18 .alt2} | ::: |
| 19 | |
| ::: | ::: {.line .number15 .index14 .alt2} |
| | {.css .spaces}padding{.css |
| ::: {.line .number20 .index19 .alt1} | .keyword}: {.css .plain}2em{.css |
| 20 | .value};{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number21 .index20 .alt2} | ::: {.line .number16 .index15 .alt1} |
| 21 | {.css .spaces}width{.css |
| ::: | .keyword}: {.css .plain}25%{.css |
| | .value};{.css .plain} |
| ::: {.line .number22 .index21 .alt1} | ::: |
| 22 | |
| ::: | ::: {.line .number17 .index16 .alt2} |
| | }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number18 .index17 .alt1} |
| | |
| | ::: |
| | |
| | ::: {.line .number19 .index18 .alt2} |
| | .column:nth-child({.css .plain}1{.css |
| | .value}) { {.css |
| | .plain}background-color{.css |
| | .keyword}: {.css .plain}#9df5ba{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number20 .index19 .alt1} |
| | .column:nth-child({.css .plain}2{.css |
| | .value}) { {.css |
| | .plain}background-color{.css |
| | .keyword}: {.css .plain}#9df5d7{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number21 .index20 .alt2} |
| | .column:nth-child({.css .plain}3{.css |
| | .value}) { {.css |
| | .plain}background-color{.css |
| | .keyword}: {.css .plain}#9df5f5{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number22 .index21 .alt1} |
| | .column:nth-child({.css .plain}4{.css |
| | .value}) { {.css |
| | .plain}background-color{.css |
| | .keyword}: {.css .plain}#9dd7f5{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | ::::::::::::::::::::::::: |
+--------------------------------------+------------------------------------------------+
::::
Demo
虽然这工作的很棒，但我们仍然需要使用浮动，我们仍然需要清除浮动。此外，我们我们只能使用内边距作为元素的空间，外边距不再起作用。这意味着在快元素之间没有实际的空间，而是它的内容。虽然这对很多设计非常有用，但仍然觉得它是个小错误。
- Firefox 1
- Chrome 1
- IE 8
- Opera 7
- Safari 3
width: calc(百分比 -- 距离)
另一个伟大的选择是使用calc()函数。他允许我们在不依赖JavaScript的情况下计算元素的真实宽度------可以是不同的单位！
HTML
:::: {#highlighter_813745 .syntaxhighlighter .xml} ::: toolbar :::
+------------------------------------+------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | <{.xml .plain}div{.xml |
| | .keyword} class{.xml |
| ::: {.line .number2 .index1 .alt1} | .color1}={.xml |
| 2 | .plain}"row"{.xml |
| ::: | .string}>{.xml .plain} |
| | ::: |
| ::: {.line .number3 .index2 .alt2} | |
| 3 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.xml .spaces}<{.xml |
| | .plain}div{.xml |
| ::: {.line .number4 .index3 .alt1} | .keyword} class{.xml |
| 4 | .color1}={.xml |
| ::: | .plain}"column"{.xml |
| | .string}>Col one</{.xml |
| ::: {.line .number5 .index4 .alt2} | .plain}div{.xml |
| 5 | .keyword}>{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number6 .index5 .alt1} | ::: {.line .number3 .index2 .alt2} |
| 6 | {.xml .spaces}<{.xml |
| ::: | .plain}div{.xml |
| | .keyword} class{.xml |
| | .color1}={.xml |
| | .plain}"column"{.xml |
| | .string}>Col two</{.xml |
| | .plain}div{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number4 .index3 .alt1} |
| | {.xml .spaces}<{.xml |
| | .plain}div{.xml |
| | .keyword} class{.xml |
| | .color1}={.xml |
| | .plain}"column"{.xml |
| | .string}>Col three</{.xml |
| | .plain}div{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number5 .index4 .alt2} |
| | {.xml .spaces}<{.xml |
| | .plain}div{.xml |
| | .keyword} class{.xml |
| | .color1}={.xml |
| | .plain}"column"{.xml |
| | .string}>Col four</{.xml |
| | .plain}div{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number6 .index5 .alt1} |
| | </{.xml .plain}div{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | ::::::::: |
+------------------------------------+------------------------------------+
::::
CSS
:::: {#highlighter_522049 .syntaxhighlighter .css} ::: toolbar :::
+--------------------------------------+--------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::::::::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | .row { {.css |
| | .plain}margin-left{.css |
| ::: {.line .number2 .index1 .alt1} | .keyword}: {.css |
| 2 | .plain}-1em{.css .value}; }{.css |
| ::: | .plain} |
| | ::: |
| ::: {.line .number3 .index2 .alt2} | |
| 3 | ::: {.line .number2 .index1 .alt1} |
| ::: | |
| | ::: |
| ::: {.line .number4 .index3 .alt1} | |
| 4 | ::: {.line .number3 .index2 .alt2} |
| ::: | .row:after {{.css .plain} |
| | ::: |
| ::: {.line .number5 .index4 .alt2} | |
| 5 | ::: {.line .number4 .index3 .alt1} |
| ::: | {.css .spaces}clear{.css |
| | .keyword}: {.css |
| ::: {.line .number6 .index5 .alt1} | .plain}both{.css .value};{.css |
| 6 | .plain} |
| ::: | ::: |
| | |
| ::: {.line .number7 .index6 .alt2} | ::: {.line .number5 .index4 .alt2} |
| 7 | {.css .spaces}content{.css |
| ::: | .keyword}: {.css .plain}''{.css |
| | .string};{.css .plain} |
| ::: {.line .number8 .index7 .alt1} | ::: |
| 8 | |
| ::: | ::: {.line .number6 .index5 .alt1} |
| | {.css .spaces}display{.css |
| ::: {.line .number9 .index8 .alt2} | .keyword}: {.css |
| 9 | .plain}block{.css .value};{.css |
| ::: | .plain} |
| | ::: |
| ::: {.line .number10 .index9 .alt1} | |
| 10 | ::: {.line .number7 .index6 .alt2} |
| ::: | }{.css .plain} |
| | ::: |
| ::: {.line .number11 .index10 .alt2} | |
| 11 | ::: {.line .number8 .index7 .alt1} |
| ::: | |
| | ::: |
| ::: {.line .number12 .index11 .alt1} | |
| 12 | ::: {.line .number9 .index8 .alt2} |
| ::: | .column {{.css .plain} |
| | ::: |
| ::: {.line .number13 .index12 .alt2} | |
| 13 | ::: {.line .number10 .index9 .alt1} |
| ::: | {.css .spaces}float{.css |
| | .keyword}: {.css |
| ::: {.line .number14 .index13 .alt1} | .plain}left{.css .value};{.css |
| 14 | .plain} |
| ::: | ::: |
| | |
| ::: {.line .number15 .index14 .alt2} | ::: {.line .number11 .index10 .alt2} |
| 15 | {.css .spaces}margin-left{.css |
| ::: | .keyword}: {.css .plain}1em{.css |
| | .value};{.css .plain} |
| ::: {.line .number16 .index15 .alt1} | ::: |
| 16 | |
| ::: | ::: {.line .number12 .index11 .alt1} |
| | {.css .spaces}min-height{.css |
| ::: {.line .number17 .index16 .alt2} | .keyword}: {.css .plain}8em{.css |
| 17 | .value};{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number18 .index17 .alt1} | ::: {.line .number13 .index12 .alt2} |
| 18 | {.css .spaces}padding{.css |
| ::: | .keyword}: {.css .plain}1em{.css |
| | .value};{.css .plain} |
| ::: {.line .number19 .index18 .alt2} | ::: |
| 19 | |
| ::: | ::: {.line .number14 .index13 .alt1} |
| | {.css .spaces}width{.css |
| ::: {.line .number20 .index19 .alt1} | .keyword}: -webkit-calc({.css |
| 20 | .plain}25%{.css .value} - {.css |
| ::: | .plain}3em{.css .value});{.css |
| | .plain} |
| ::: {.line .number21 .index20 .alt2} | ::: |
| 21 | |
| ::: | ::: {.line .number15 .index14 .alt2} |
| | {.css .spaces}width{.css |
| ::: {.line .number22 .index21 .alt1} | .keyword}: -moz-calc({.css |
| 22 | .plain}25%{.css .value} - {.css |
| ::: | .plain}3em{.css .value});{.css |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number16 .index15 .alt1} |
| | {.css .spaces}width{.css |
| | .keyword}: calc({.css |
| | .plain}25%{.css .value} - {.css |
| | .plain}3em{.css .value});{.css |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number17 .index16 .alt2} |
| | }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number18 .index17 .alt1} |
| | |
| | ::: |
| | |
| | ::: {.line .number19 .index18 .alt2} |
| | .column:nth-child({.css |
| | .plain}1{.css .value}) { {.css |
| | .plain}background-color{.css |
| | .keyword}: {.css |
| | .plain}#9df5ba{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number20 .index19 .alt1} |
| | .column:nth-child({.css |
| | .plain}2{.css .value}) { {.css |
| | .plain}background-color{.css |
| | .keyword}: {.css |
| | .plain}#9df5d7{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number21 .index20 .alt2} |
| | .column:nth-child({.css |
| | .plain}3{.css .value}) { {.css |
| | .plain}background-color{.css |
| | .keyword}: {.css |
| | .plain}#9df5f5{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number22 .index21 .alt1} |
| | .column:nth-child({.css |
| | .plain}4{.css .value}) { {.css |
| | .plain}background-color{.css |
| | .keyword}: {.css |
| | .plain}#9dd7f5{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | ::::::::::::::::::::::::: |
+--------------------------------------+--------------------------------------+
::::
Demo
重新计算实际尺寸的能力是一个伟大的选择，但不幸的的是，我们仍然需要浮动，我们也需要列的容器为负外边距。同上，一个很棒的选择，但仍然有些瑕疵。
- Firefox 4
- Chrome 19
- IE 9
- Opera ?
- Safari 6 (appears to be a little buggy)
Flexbox
::: tran-result 伸缩布局盒是有特定配置行为的元素------有点像表格。这是真的吗？是的没错。表格的行为实际上相当棒，因为它的显示依据它的内容而变化。但现在已经不再使用表格布局，所以表格标签不是一个选项。 :::
::: tran-result 起初，伸缩盒看起来有待年复杂。有很多很难理解的属性，尤其像我这样不擅用英语演讲的人。幸运的是，Chirs Coyier写了一个关于伸缩盒的伟大指导{target="_blank"}，我必须提到。 :::
HTML
:::: {#highlighter_820853 .syntaxhighlighter .xml} ::: toolbar :::
+------------------------------------+------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | <{.xml .plain}div{.xml |
| | .keyword} class{.xml |
| ::: {.line .number2 .index1 .alt1} | .color1}={.xml |
| 2 | .plain}"row"{.xml |
| ::: | .string}>{.xml .plain} |
| | ::: |
| ::: {.line .number3 .index2 .alt2} | |
| 3 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.xml .spaces}<{.xml |
| | .plain}div{.xml |
| ::: {.line .number4 .index3 .alt1} | .keyword} class{.xml |
| 4 | .color1}={.xml |
| ::: | .plain}"column"{.xml |
| | .string}>Col one</{.xml |
| ::: {.line .number5 .index4 .alt2} | .plain}div{.xml |
| 5 | .keyword}>{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number6 .index5 .alt1} | ::: {.line .number3 .index2 .alt2} |
| 6 | {.xml .spaces}<{.xml |
| ::: | .plain}div{.xml |
| | .keyword} class{.xml |
| | .color1}={.xml |
| | .plain}"column"{.xml |
| | .string}>Col two</{.xml |
| | .plain}div{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number4 .index3 .alt1} |
| | {.xml .spaces}<{.xml |
| | .plain}div{.xml |
| | .keyword} class{.xml |
| | .color1}={.xml |
| | .plain}"column"{.xml |
| | .string}>Col three</{.xml |
| | .plain}div{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number5 .index4 .alt2} |
| | {.xml .spaces}<{.xml |
| | .plain}div{.xml |
| | .keyword} class{.xml |
| | .color1}={.xml |
| | .plain}"column"{.xml |
| | .string}>Col four</{.xml |
| | .plain}div{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number6 .index5 .alt1} |
| | </{.xml .plain}div{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | ::::::::: |
+------------------------------------+------------------------------------+
::::
CSS
:::: {#highlighter_961970 .syntaxhighlighter .css} ::: toolbar :::
+--------------------------------------+--------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::::::::::::::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | .row {{.css .plain} |
| | ::: |
| ::: {.line .number2 .index1 .alt1} | |
| 2 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.css .spaces}display{.css |
| | .keyword}: -webkit-flex;{.css |
| ::: {.line .number3 .index2 .alt2} | .plain} |
| 3 | ::: |
| ::: | |
| | ::: {.line .number3 .index2 .alt2} |
| ::: {.line .number4 .index3 .alt1} | {.css |
| 4 | .spaces}-webkit-flex-{.css |
| ::: | .plain}direction{.css |
| | .keyword}: row;{.css .plain} |
| ::: {.line .number5 .index4 .alt2} | ::: |
| 5 | |
| ::: | ::: {.line .number4 .index3 .alt1} |
| | {.css |
| ::: {.line .number6 .index5 .alt1} | .spaces}-webkit-flex-wrap: {.css |
| 6 | .plain}nowrap{.css .value};{.css |
| ::: | .plain} |
| | ::: |
| ::: {.line .number7 .index6 .alt2} | |
| 7 | ::: {.line .number5 .index4 .alt2} |
| ::: | {.css |
| | .spaces}-webkit-justify-{.css |
| ::: {.line .number8 .index7 .alt1} | .plain}content{.css |
| 8 | .keyword}: space-between;{.css |
| ::: | .plain} |
| | ::: |
| ::: {.line .number9 .index8 .alt2} | |
| 9 | ::: {.line .number6 .index5 .alt1} |
| ::: | |
| | ::: |
| ::: {.line .number10 .index9 .alt1} | |
| 10 | ::: {.line .number7 .index6 .alt2} |
| ::: | {.css .spaces}display{.css |
| | .keyword}: flex;{.css .plain} |
| ::: {.line .number11 .index10 .alt2} | ::: |
| 11 | |
| ::: | ::: {.line .number8 .index7 .alt1} |
| | {.css .spaces}flex-{.css |
| ::: {.line .number12 .index11 .alt1} | .plain}direction{.css |
| 12 | .keyword}: row;{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number13 .index12 .alt2} | ::: {.line .number9 .index8 .alt2} |
| 13 | {.css |
| ::: | .spaces}flex-wrap: {.css |
| | .plain}nowrap{.css .value};{.css |
| ::: {.line .number14 .index13 .alt1} | .plain} |
| 14 | ::: |
| ::: | |
| | ::: {.line .number10 .index9 .alt1} |
| ::: {.line .number15 .index14 .alt2} | {.css .spaces}justify-{.css |
| 15 | .plain}content{.css |
| ::: | .keyword}: space-between;{.css |
| | .plain} |
| ::: {.line .number16 .index15 .alt1} | ::: |
| 16 | |
| ::: | ::: {.line .number11 .index10 .alt2} |
| | }{.css .plain} |
| ::: {.line .number17 .index16 .alt2} | ::: |
| 17 | |
| ::: | ::: {.line .number12 .index11 .alt1} |
| | |
| ::: {.line .number18 .index17 .alt1} | ::: |
| 18 | |
| ::: | ::: {.line .number13 .index12 .alt2} |
| | .column {{.css .plain} |
| ::: {.line .number19 .index18 .alt2} | ::: |
| 19 | |
| ::: | ::: {.line .number14 .index13 .alt1} |
| | {.css .spaces}margin{.css |
| ::: {.line .number20 .index19 .alt1} | .keyword}: {.css |
| 20 | .plain}0.5em{.css .value};{.css |
| ::: | .plain} |
| | ::: |
| ::: {.line .number21 .index20 .alt2} | |
| 21 | ::: {.line .number15 .index14 .alt2} |
| ::: | {.css |
| | .spaces}min-height{.css |
| ::: {.line .number22 .index21 .alt1} | .keyword}: {.css .plain}8em{.css |
| 22 | .value};{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number23 .index22 .alt2} | ::: {.line .number16 .index15 .alt1} |
| 23 | {.css .spaces}padding{.css |
| ::: | .keyword}: {.css .plain}1em{.css |
| | .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number17 .index16 .alt2} |
| | {.css .spaces}width{.css |
| | .keyword}: {.css .plain}25%{.css |
| | .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number18 .index17 .alt1} |
| | }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number19 .index18 .alt2} |
| | |
| | ::: |
| | |
| | ::: {.line .number20 .index19 .alt1} |
| | .column:nth-child({.css |
| | .plain}1{.css .value}) { {.css |
| | .plain}background-color{.css |
| | .keyword}: {.css |
| | .plain}#9df5ba{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number21 .index20 .alt2} |
| | .column:nth-child({.css |
| | .plain}2{.css .value}) { {.css |
| | .plain}background-color{.css |
| | .keyword}: {.css |
| | .plain}#9df5d7{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number22 .index21 .alt1} |
| | .column:nth-child({.css |
| | .plain}3{.css .value}) { {.css |
| | .plain}background-color{.css |
| | .keyword}: {.css |
| | .plain}#9df5f5{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number23 .index22 .alt2} |
| | .column:nth-child({.css |
| | .plain}4{.css .value}) { {.css |
| | .plain}background-color{.css |
| | .keyword}: {.css |
| | .plain}#9dd7f5{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | :::::::::::::::::::::::::: |
+--------------------------------------+--------------------------------------+
::::
Demo
::: tran-result 就这么简单！但......浏览器的支持不是很好。 :::
- Firefox 18
- Chrome 21
- IE 10
- Opera 12.10
- Safari 6.1
结论
尽管CSS3带来了许多新特性并且修复了一些历史遗留问题，在我看来，伸缩盒布局是用CSS创建弹性网格的唯一非hack方法。然而，不幸的是浏览器的支持表现平平。尽管如何，其他方法丰富了表现，所以他们是一个进步，并且他们有很好的浏览器支持。
原文：http://flippinawesome.org/2014/03/03/grids-in-css3/ 译文出处：颜海镜 http://yanhaijing.com
湘公网安备 43010302000398号