CSS3网格的三个新特性详解

起初，伸缩盒看起来有待年复杂。有很多很难理解的属性，尤其像我这样不擅用英语演讲的人。幸运的是，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;</p>
<p> 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; }

效果：

五、结论

尽管CSS3带来了许多新特性并且修复了一些历史遗留问题，在我看来，伸缩盒布局是用CSS创建弹性网格的唯一非hack方法。然而，不幸的是浏览器的支持表现平平。尽管如何，其他方法丰富了表现，所以他们是一个进步，并且他们有很好的浏览器支持。