制作你自己的栅格系统 Flex
2016-09-18 本文已影响196人
洗阳光
上一篇文章,我们谈到为什么要用栅格系统以及目前主流实现栅格系统的方式,而现在我们试着用 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%; }
}