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

随机推荐

[教程心得] Flash AIR 调用exe/bat且可以传参
Flash AIR 如何调用exe/bat?并且有些情况下需要传参,如何传参呢? 看下面例子: cmd传参打开系统软键盘(参考http://bbs.9ria.com/thread-181265-1-1 ...
E20180513-hm
letter n. 信; 证书,许可证; 字母,文字; 字面意义; bracket n. 支架,悬臂; 括弧; 类别,等级; [数] 同类项; coefficient n. 系数; (测定某种质量或 ...
记录下java的个人测试方法
IDEA,用 JUnitGenerator V2. 0 做单元测试.. 如果是 SpringBoot,测试类上面加注解 @RunWith(SpringJUnit4ClassRunner.class) ...
阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient：2. IoT 客户端
文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ...
学习Mahout (四)
在Mahout 学习(三)中,我贴了example的代码,里面生成向量文件的代码: InputDriver.runJob(input, directoryContainingConvertedInpu ...
html table导出到Excel中，不走后台，js完成
静态表格table <table class="table tableStyles" id="tables"> <caption>不正经 ...
[題解]luogu_P1052 過河
來源:題解不發題面因為 l 範圍太大,而石子數卻很少,步數也僅僅在1~10之間, 也就是說兩個石子之間很有可能間隔很大的距離,不管怎麼跳都能跳過去,那麼中間那些怎麼樣都能跳過去的區間和沒有等價, ...
最短路之SPFA（单源）HDU 1317
#include <iostream> #include<cstdio> #include<cstring> #include<cmath> #incl ...
Hive_Hive体系结构
元数据: HQL的执行过程 ORACEL 执行计划,Hive 类似. 无索引时,生成全表扫描执行计划,执行全表扫描. 创建索引后,重新生成SQL语句执行计划,基于索引扫描,提高查询效率.
SSE练习：单精度浮点数组求和
SSE(Streaming SIMD Extensions)指令是一种SIMD 指令, Intrinsics函数则是对SSE指令的函数封装,利用C语言形式来调用SIMD指令集,大大提高了易读性和可维护 ...

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

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

随机推荐

热门专题