一个典型的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上需要单独加一下兼容才 ...

随机推荐

SQL Server知识详解
1.SET NOCOUNT ON的作用: 作用:阻止在结果集中返回显示受T-SQL语句或则usp影响的行计数信息. 语法:SET NOCOUNT {ON | OFF} 详解:当SET ONCOUNT ...
HDU2444 【二分图判定+最大匹配】
套模板很好的题? #include<bits/stdc++.h> using namespace std; const int N=2e2+10; const int M=4e4+10; ...
D - Bomb
//反向62 #include <iostream> #include <algorithm> #include <string> #include <cst ...
sQL存储过程的优缺点
目前具体的项目中没有使用sql存储过程,都用的封装好的框架,简单说下存储过程的优缺点. 优点: 1.存储过程只在创造时进行编译,以后每次执行存储过程都不需再重新编译,而一般 SQL 语句每执行一次就编 ...
C# 常量与只读属性的区别
public readonly string name ----这个name是个只读属性,不需要在定义时初始化值,而是可以在构造函数中完成初始化. public const int age =18 ...
python 基础(八) os模块
OS模块概念:包含了普遍的操作系统的功能一.函数函数名函数说明 os.name 获取操作系统类型 nt->Windows posix->Linux/Unix os.listdir ...
17 文件和网络I/O
1 文件和网络I/O 1.1 文件处理 groovy向java所提供的File 类,新增了几个方便的方法.分别是:eachLine和.text. package file class F ...
Java的Cloneable接口还有深浅复制
我的小记录首先语法上,搞清除,Java有个Cloneable接口,但这个接口是没有定义方法的. 那实现了这个接口有什么用呢? 再看Object类中,有个clone()方法,这个方法提供一个浅复制的功 ...
05.Javascript——入门函数
//定义函数的方法1 function abs(x) { if (x >= 0) { return x; } else { return -x; } } 上述abs()函数的定义如下: func ...
hdu3487Play with Chain(splay)
链接简单的两种操作,一种删除某段区间,加在第I个点的后面,另一个是翻转区间.都是splay的简单操作. 悲剧一:pushdown时候忘记让lz=0 悲剧二:删除区间,加在某点之后的时候忘记修改其父亲 ...

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

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

随机推荐

热门专题