一、目的

最近仔细的回顾了flex布局,回顾了一下基本用法,文章地址:

说实在的,还没有全部的在一个项目中完全使用flex进行布局,而现在比较流行的 bootstrap 使用 float 的方式进行栅格布局。

而使用 flex 一般都是 Grid 布局,等宽的实现非常简单。

所以,参照 bootstrap 的基本的栅格布局方式,用 flex 搞了一下响应式栅格布局.

二、效果

1、代码说明:

因为不考虑和其他的框架进行整合,所以我直接写的是 bootstrap 的命名方式,包括container,row,col-md-*,col-xs-* 这样的写法。

2、最终的效果:

width > 992 的屏幕:

2-1.jpg

width > 768 的屏幕:

2-2.jpg

width < 768 的屏幕:(手机)

2-3.jpg

2、关键点说明:

1. 移动端优先

所谓的一定端优先就是,当设置了 col-xs- 的时候,xs是能够从小屏幕应用到大屏幕的。

  • 比如上面的效果中,在 sm条件的屏幕中,我没有设置col-sm-但是由于col-xs-的class,影响了sm的布局。

2. 向下屏幕兼容

这个问题是我再写的时候发现的,再写一个元素的时候,我们不可能每个div都给一个 col-lg col-md col-sm col-xs

有时候我们就希望col-md-的效果到了col-sm col-xs的屏幕上直接全部显示,也就是宽度显示100%

因此这需要设置,如果我只写了col-md没有写col-xs col-sm的时候,给一个兼容的样式,如100%.

三、代码

代码比较长,是完整的html代码,只说几个关键点:

1. col-xs-* 没有放在max-width:768px的条件中

这样子就是为了小屏幕的布局,影响大屏幕的布局。

当然,col-xs col-sm col-md col-lg 的顺序肯定是不能变的

2. 实现大屏幕的布局在小屏幕都是100%,而不需要指定

通过下面的方式,能够明确,如果不是当前的屏幕的尺寸,则直接变成100%

.col-md-1, .col-sm-1, .col-lg-1, .col-md-2, .col-sm-2, .col-lg-2, .col-md-3, .col-sm-3, .col-lg-3,.col-md-4, .col-sm-4, .col-lg-4,.col-md-5, .col-sm-5, .col-lg-5, .col-md-6, .col-sm-6, .col-lg-6, .col-md-7, .col-sm-7, .col-lg-7,.col-md-8, .col-sm-8, .col-lg-8,  .col-md-9, .col-sm-9, .col-lg-9, .col-md-10, .col-sm-10, .col-lg-10, .col-md-11, .col-sm-11, .col-lg-11, .col-md-12, .col-sm-12, .col-lg-12 {
         flex:0 0 100%;
    }

另外,我们在使用的时候如果要给div加border,单纯的写border:solid 1px #fff;肯定是有问题的:

会导致栅格撑开,而换行,如果要给栅格指定border,则同时需要margin一个负值。

.left{background-color:#000000;height:30px;border:solid 1px #fff;margin:-1px;}

完整的代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Flex响应式布局</title>
</head>
<style>
    .container {
       margin:0 auto;
    }
    .row{
        display: flex;
        display: -webkit-flex;
        flex-flow: row wrap;
        -webkit-flex-flow:row wrap;
        -ms-flex-flow:row wrap;
    }
    .row > .col-xs-*,.row > .col-sm-*,.row > .col-sm-* {
        padding-left:10px;
        padding-right:10px;
        min-height: 1px;
        position: relative;
    }
    .col-md-1, .col-sm-1, .col-lg-1, .col-md-2, .col-sm-2, .col-lg-2, .col-md-3, .col-sm-3, .col-lg-3,.col-md-4, .col-sm-4, .col-lg-4,.col-md-5, .col-sm-5, .col-lg-5, .col-md-6, .col-sm-6, .col-lg-6, .col-md-7, .col-sm-7, .col-lg-7,.col-md-8, .col-sm-8, .col-lg-8,  .col-md-9, .col-sm-9, .col-lg-9, .col-md-10, .col-sm-10, .col-lg-10, .col-md-11, .col-sm-11, .col-lg-11, .col-md-12, .col-sm-12, .col-lg-12 {
         flex:0 0 100%;
    }
    .col-xs-12 {
        flex: 0 0 100%;
    }
    .col-xs-1 {
        flex:0 0 8.33333%;
    }
    .col-xs-2 {
        flex:0 0 16.66667%;
    }
    .col-xs-3 {
        flex:0 0 25%;
    }
    .col-xs-4 {
        flex:0 0 33.33333%;
    }
    .col-xs-5 {
        flex:0 0 41.66667%;
    }
    .col-xs-6 {
        flex: 0 0 50%; 
    }
    .col-xs-7 {
        flex: 0 0 58.33333%;
    }
    .col-xs-8 {
        flex: 0 0 66.66667%;
    }
    .col-xs-9 {
        flex:0 0 75%;
    }
    .col-xs-10 {
        flex:0 0 83.33333%;
    }
    .col-xs-11 {
        flex: 0 0 91.66667%;
    } 
   
    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
        .col-sm-12 {
            flex: 0 0 100%;
        }
        .col-sm-1 {
            flex:0 0 8.33333%;
        }
        .col-sm-2 {
            flex:0 0 16.66667%;
        }
        .col-sm-3 {
            flex:0 0 25%;
        }
        .col-sm-4 {
            flex:0 0 33.33333%;
        }
        .col-sm-5 {
            flex:0 0 41.66667%;
        }
        .col-sm-6 {
            flex: 0 0 50%; 
        }
        .col-sm-7 {
            flex: 0 0 58.33333%;
        }
        .col-sm-8 {
            flex: 0 0 66.66667%;
        }
        .col-sm-9 {
            flex:0 0 75%;
        }
        .col-sm-10 {
            flex:0 0 83.33333%;
        }
        .col-sm-11 {
            flex: 0 0 91.66667%;
        }
    } 
    @media (min-width: 992px) {
        .container {
            width: 970px;
        } 
        .col-md-12 {
            flex: 0 0 100%;
        }
        .col-md-1 {
            flex:0 0 8.33333%;
        }
        .col-md-2 {
            flex:0 0 16.66667%;
        }
        .col-md-3 {
            flex:0 0 25%;
        }
        .col-md-4 {
            flex:0 0 33.33333%;
        }
        .col-md-5 {
            flex:0 0 41.66667%;
        }
        .col-md-6 {
            flex: 0 0 50%; 
        }
        .col-md-7 {
            flex: 0 0 58.33333%;
        }
        .col-md-8 {
            flex: 0 0 66.66667%;
        }
        .col-md-9 {
            flex:0 0 75%;
        }
        .col-md-10 {
            flex:0 0 83.33333%;
        }
        .col-md-11 {
            flex: 0 0 91.66667%;
        }
    }
    @media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
        .col-lg-12 {
            flex: 0 0 100%;
        }
        .col-lg-1 {
            flex:0 0 8.33333%;
        }
        .col-lg-2 {
            flex:0 0 16.66667%;
        }
        .col-lg-3 {
            flex:0 0 25%;
        }
        .col-lg-4 {
            flex:0 0 33.33333%;
        }
        .col-lg-5 {
            flex:0 0 41.66667%;
        }
        .col-lg-6 {
            flex: 0 0 50%; 
        }
        .col-lg-7 {
            flex: 0 0 58.33333%;
        }
        .col-lg-8 {
            flex: 0 0 66.66667%;
        }
        .col-lg-9 {
            flex:0 0 75%;
        }
        .col-lg-10 {
            flex:0 0 83.33333%;
        }
        .col-lg-11 {
            flex: 0 0 91.66667%;
        }
    } 
</style>
<style>
    *{color:#fff;}
    .left{background-color:#000000;height:30px;border:solid 1px #fff;margin:-1px;}
    .right{background-color:#000000;height:30px;border:solid 1px #fff;margin:-1px;}
    .center{background-color:#cccccc;height:30px;border:solid 1px #fff;margin:-1px;}
</style>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 left">
                <span>col-xs-12</span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3  col-xs-6 left">
                <span>col-md-3 col-xs-6</span>
            </div> 
            <div class="col-md-4  col-xs-6 right">
                <span>col-md-4  col-xs-6</span>
            </div>
            <div class="col-md-5  center">  
                <span>col-md-5 </span>
            </div> 
        </div>
    </div>
</body>
</html>