上一篇文章，我们谈到为什么要用栅格系统以及目前主流实现栅格系统的方式，而现在我们试着用 CSS3 新属性 flex 来制作栅格系统。注意，以下代码未做兼容设置，实际使用的时候需要添加兼容选项，建议使用 postcss + autoprefixer 。
为什么用 flex
- 更加简洁的栅格系统，如果不需要完整的尺寸选项，短短几行就可以构造宽度自适应的平分的栅格。
- 移动端：更简单，高效的完成可伸缩式页面的布局。一句属性设置，就可以完成顶部对齐，居中对齐或是底部对齐的切换。天然适合移动端。
什么是 flex
2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。
通过 flex 可以实现不同的弹性和方位，包括规定伸缩比例，所占宽度，九宫格位置等等。详情可以参考阮一峰的 flex 布局教程。总之，flex 了未来主流的方向布局。
Container
.container * {
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 1200px;
}
Row
和之前不一样的是，我们再也不需要清除浮动，通过让 row 成为 flex 容器，那么其子元素会自动成为 flex item。我们在这里规定，其放大比例为 0，缩小比例为 1，宽度默认为自适应（即占剩下的所有空间）。子元素排列方向为从左到右，同时当元素宽度超过一行宽度时换行。
.row {
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
}
Column
这里我们给我们的列设置了间距，同时多了一个非尺寸选项用来处理占满剩余空间这个元素。
[class *= 'col-'] {
padding: 2rem;
}
.col {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-1 { flex-basis: 16.66%; }
.col-2 { flex-basis: 33.33%; }
.col-3 { flex-basis: 50%; }
.col-4 { flex-basis: 66.664%; }
.col-5 { flex-basis: 83.33%; }
.col-6 { flex-basis: 100%; }
Responsive
由于在移动端下面，我们希望当元素到达最小宽度的时候，默认充满一行，所以有如下：
[class *= 'col-'] {
flex: 0 0 auto; /* 宽度最小的时候，默认充满一行 */
padding: 2rem;
}
.col {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.center {}
@ media all and (min-width: 48em) {
.col-sm-1 { flex-basis: 16.66%; }
.col-sm-2 { flex-basis: 33.33%; }
.col-sm-3 { flex-basis: 50%; }
.col-sm-4 { flex-basis: 66.664%; }
.col-sm-5 { flex-basis: 83.33%; }
.col-sm-6 { flex-basis: 100%; }
}
