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

随机推荐

sfc命令
开始—>运行—>再输入“sfc /scannow”(不含引号),“sfc”是“系统文件检测”程序,它是一个在命令提示符下使用的实用程序,只有是管理员才能使用该程序,这个程序的作用就是检测系 ...
Lua教程 loadfile与loadstring
在程序运行中有时需要运行用户输入的代码1.loadfile把文件编译为可执行的函数f=loadfile('\\temp\\a.lua') ----给f方法赋值print(type(f)) - ...
E20180509-sl
chronology n. 年代学; 年表,(按时间排列的)大事记 claim n. 索赔; 声称; (根据权利而提出的) 要求; 断言; vt. 声称; 索取; 断言; 需要; count ...
opencv学习资料
搜集一些基础书数字图像处理信号与系统计算机视觉中的多视图几何图像处理.分析与机器视觉基于序列图像的视觉检测理论与方法官网(各版本api) http://opencv.org/ opencv ...
根运动 (Root Motion) – 工作原理
http://blog.csdn.net/myarrow/article/details/45505085 1. 基本概念在Unity3D动画中,模型的位置.角度经常会发生变化,我们需要决定是否将模 ...
[Xcode 实际操作]八、网络与多线程-(7)使用MessageUI框架，创建并发送一封带有附件的邮件
目录:[Swift]Xcode实际操作本文将演示如何使用MessageUI框架,创建并发送一封带有附件的邮件. 使用邮件编辑视图控制器(MFMailComposeViewController)实现邮 ...
[Xcode 实际操作]八、网络与多线程-(23)多线程的同步与异步的区别
目录:[Swift]Xcode实际操作本文将演示线程的同步与异步的区别. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 异步线程的运行,是没有按照顺序执行的. ...
HTTPS为什么更安全，请看这里
本文转载于https://foofish.net/https-story-1.html HTTPS 是建立在密码学基础之上的一种安全通信协议,严格来说是基于 HTTP 协议和 SSL/TLS 的组合. ...
简单实现TabBar的自定义
StackoverFlow上看到的,通过继承UITabBarController创建自定义TabBarController.在原有TabBar的基础上添加一个背景层,在其基础上增加三个自定义按钮,通过 ...
cmd - 使用curl命令的注意点
前言最近在cmd中使用curl命令来测试rest api,发现有不少问题,这里记录一下. 在cmd中使用curl命令的注意事项 json不能由单引号包括起来 json数据里的双引号要用反斜杠\转义 ...

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

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

随机推荐

热门专题