制作你自己的栅格系统 Flex

上一篇文章，我们谈到为什么要用栅格系统以及目前主流实现栅格系统的方式，而现在我们试着用 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%; }
}

实现

demo

参考

flex 语法
solved by flexbox
flexboxgrid