一个典型的flex布局，兼容性比较好

html 代码：

<body class="flex-wrap col-flex">

    <header class="midCenter flex-wrap row-flex">我是标题</header>

    <div class="page flex-wrap col-flex">

        <div class="scroll-wrap">

            <section class="midCenter flex-wrap" id="banner">

                <div>我是banner</div>

            </section>

            <section id="quirk" class="flex-wrap row-flex">

                <div></div>

                <div class="flex-wrap col-flex">

                    <div></div>

                    <div></div>

                </div>

            </section>

            <section id="four-col" class="flex-wrap row-flex">

                <div></div>

                <div></div>

                <div></div>

                <div></div>

            </section>

            <section id="two-col" class="flex-wrap row-flex">

                <div></div>

                <div></div>

            </section>

            <section id="three-col" class="flex-wrap row-flex">

                <div></div>

                <div></div>

                <div></div>

            </section>

        </div>

    </div>

    <footer class="flex-wrap row-flex">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </footer>

</body>

　　css代码：

        html{

            height:100%;

        }

        body{

            background: #fff;

            margin:0;

            padding:0;

            width: 100%;

            height: 100%;

        }

        /** 水平伸缩容器**/

        .row-flex{

            -moz-box-orient: horizontal;

            -webkit-box-orient: horizontal;

            -moz-box-direction: normal;

            -webkit-box-direction: normal;

            -moz-box-lines: multiple;

            -webkit-box-lines: multiple;

            -ms-flex-flow: row wrap;

            -webkit-flex-flow: row wrap;

            flex-flow: row wrap;

        }

        /** 垂直伸缩容器**/

        .col-flex{

            -moz-box-orient: vertical;

            -webkit-box-orient: vertical;

            -moz-box-direction: normal;

            -moz-box-lines: multiple;

            -webkit-box-lines: multiple;

            -webkit-flex-flow: column wrap;

            -ms-flex-flow: column wrap;

            flex-flow: column wrap;

        }

        /** 伸缩容器**/

        .flex-wrap{

            /** 各种版本兼容**/

            display: -webkit-box;

            display: -moz-box;

            display: -ms-flexbox;

            display: -webkit-flex;

            display: flex;

        }

        /** 垂直居中**/

        .midCenter{

            /** 垂直居中核心**/

            -moz-box-pack: center;

            -webkit-box-pack: center;

            box-pack:center;

            -moz-box-align: center;

            -webkit-box-align: center;

            box-align: center;

            box-pack:center;

            -ms-flex-pack:center;

            display: -ms-flexbox;

            -ms-flex-align:center;

            justify-content:center;

            align-items: center;

        }

        /** 占位器**/

        .page{

            -webkit-box-flex: 1;

            -moz-box-flex: 1;

            -ms-flex: 1;

            -webkit-flex: 1;

            flex: 1;

            overflow: hidden;

        }

        /** 真正滚动**/

        .scroll-wrap{

            position: relative;

            width: 100%;

            height: 100%;

            overflow: scroll;

            -webkit-box-flex: 1;

            -moz-box-flex: 1;

            -webkit-flex: 1;

            -ms-flex: 1;

            flex: 1;

        }

        /** 头和尾巴**/

        header,footer{

            background:#f7f7f7;

            height:44px;

        }

        footer>div{

            -webkit-box-flex: 1;

            -moz-box-flex: 1;

            -ms-flex: 1;

            -webkit-flex: 1;

            flex: 1;

            border:1px solid #666;

            margin:4px;

        }

        section{

            margin:3px 5px;

        }

        /** 真正设置高度 **/

        #banner{

            border:2px solid #999;

            margin:1px;

            height:100px;

        }

        #quirk,#four-col{

            height:150px;

        }

        #three-col,#two-col{

            height:100px;

        }

        /** 内部组件**/

        #four-col>div,#three-col>div,#two-col>div{

            -webkit-box-flex: 1;

            -moz-box-flex: 1;

            -ms-flex: 1;

            -webkit-flex: 1;

            flex: 1;

        }

        #four-col>div{

            background: #aaebbe;

            margin:0 2px;

        }

        #three-col>div{

            background: #8f82bc;

            margin:0 2px;

        }

        #two-col>div{

            background: #f7baba;

            margin:0 2px;

        }

        #quirk>div{

            margin:0 2px;

        }

        #quirk>div:nth-child(1){

            background: #b9e2ee;

            -webkit-box-flex: 200;

            -moz-box-flex: 200;

            -ms-flex: 200;

            -webkit-flex: 200;

            flex: 200;

        }

        #quirk>div:nth-child(2){

            -webkit-box-flex: 175;

            -moz-box-flex: 175;

            -ms-flex: 175;

            -webkit-flex: 175;

            flex: 175;

        }

        #quirk>div:nth-child(2)>div:nth-child(1){

            background: #b9e2ee;

            -webkit-box-flex: 60;

            -moz-box-flex: 60;

            -ms-flex: 60;

            -webkit-flex: 60;

            flex: 60;

            margin-bottom: 4px;

        }

        #quirk>div:nth-child(2)>div:nth-child(2){

            background: #b9e2ee;

            -webkit-box-flex: 30;

            -moz-box-flex: 30;

            -ms-flex: 30;

            -webkit-flex: 30;

            flex: 30;

        }

一个典型的flex布局，兼容性比较好的更多相关文章

IE 11 flex布局兼容性问题 ---- 不支持min-height 和flex:1
由于最近项目要嵌入其它平台,所以要做IE11 的兼容,那就用IE11打开网页看一看,一看吓一跳,页脚直接到了页眉的下面,并把主要内容覆盖了,也就是stick footer 布局失效了,我写了一个简易的 ...
flex布局兼容性写法
CSS样式 flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水 ...
Flex 布局知识点梳理
传统的布局方案,在针对特殊布局时会很不方便,比如垂直居中,把一个容器等分为N列等等.自从 Flex 出现以后,这些都迎刃而解了,本文对Flex相关内容做一个简单梳理. 什么是 Flex Flex 是 ...
flex 布局方式
开始啦 1. flex-direction 有关主轴的对齐方式 column 自上到下 row 自左到右 -->默认值 row-reverse 自右到左 column-reverse 自下到上 ...
谈谈flex布局实现水平垂直居中
我们在这要谈的是用flex布局来实现水平和垂直居中.随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中.所以09年,W3C 提出了一种新的方案 ...
button 使用 flex 布局的兼容性问题
button 使用 flex 布局的兼容性问题在低版本的手机系统中, button 不能够作为 flex 元素,即使在 CSS 中指定了 display: flex 且 autoprefixer 也 ...
css3 flex布局结合transform生成一个3D骰子
预览地址: https://zhaohh.github.io/flex-dice/index.html 1 Flex 布局首先聊聊Flex 布局,Flex 布局又称"弹性布局", ...
关于flex布局中的兼容性问题
这几天在做项目中用到了flex布局,但是在测试的过程中发现他的兼容性实在是太差了,仅仅用到水平和垂直居中的样式,没想到兼容性代码就写了好几行. display:flex; display:-webki ...
flex布局在ios8上的兼容性问题
最近在做项目时,使用到了flex布局.其他ios版本都还好,唯独在ios8上遇到了flex布局没起作用的问题.后来经过研究才发现,safari使用的是webkit内核,在ios8上需要单独加一下兼容才 ...

随机推荐

lightoj1066【BFS】
题意: 就是按照A->B->C->D....去拿,求步数: 思路: 有一个注意点:如果碰到合法字母吃掉,再以后的某次可以重新到改点: BFS的因为标记而减少了重复位置的到达,但是按照 ...
51nod 1416【DFS】
思路: 暴力整个图,以这个为起点,然后看一下有没有找到一条路是会指向自己且元素个数>=4: #include <bits/stdc++.h> using namespace std; ...
hdu2147(yy)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2147 题意:给出一个n*m的矩阵,一开始有个点在最右上方, 两个人轮流移动点,可以向左移一格,或者向下 ...
CF364D Ghd（随机化）
另一个集合\(s\)的\(ghd\)为\(max\{gcd(s')||s'|>=0.5|s|\}\) 给定序列\(a\),求\(ghd\) 随机化算法.因为\(|s'|\geq 0.5|S|\) ...
perl 安装LOG4perl 模块
环境信息 ubuntu 12.04 64位桌面版 Log-Log4perl 的介绍网址:http://search.cpan.org/~mschilli/Log-Log4perl-1.49/lib/ ...
Android的文件读取与存储
Java新建文件,然后就可以写入数据了,但是Android却不一样,因为Android是基于Linux的,我们在读写文件的时候,还需加上文件的操作模式 Environment类是一个提供访问环境变量 ...
Java 序列化(转)
转自 http://www.infoq.com/cn/articles/cf-java-object-serialization-rmi 对于一个存在于Java虚拟机中的对象来说,其内部的状态只保持在 ...
day04 Calendar类
在Mac上安装Ubuntu14.04虚拟机
1.在macOS High Sierras上安装VMware for mac 下载地址:VMware Fusion 8.5.1 https://pan.baidu.com/s/1skQ1OyL 2. ...
[题解]区间dp_luogu_P3147 262144
小数据版本P3146,可以区间dp, 性质:对于一个区间如果能合并成一个数,那么这个数是确定的理解:把每个数看做 2^x 的形式,那么如果合并:2^x + 2^x =2^(x+1) 所以 f [ i ...

一个典型的flex布局，兼容性比较好

一个典型的flex布局，兼容性比较好的更多相关文章

随机推荐

热门专题