制作你自己的栅格系统 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%; }
}

实现

demo

参考

flex 语法
solved by flexbox
flexboxgrid

上一篇下一篇

猜你喜欢

热点阅读