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

随机推荐

Android布局中的layout_weight和weightSum属性的详解及使用
由于Android设备的尺寸大小不一,种类繁多,当我们在开发应用的时候就要考虑屏幕的适配型了,尽可能让我们的应用适用于主流机型的尺寸,这样我们的应用不会因为尺寸不同而不美观,解决屏幕适配问题的方法有很 ...
Codeforces Round #439 (Div. 2)C - The Intriguing Obsession（简单dp）
传送门题意给出三个集合,每个集合的元素数量为a,b,c,现在需要连边,满足集合内元素不可达或最短路为3,求可行方案数分析设dp[i][j]为a集合元素为i个,b集合元素为j个的可行方案,易知( ...
Lightoj1080 【线段树】
题意: 给你一个0/1的数组,然后给你n段区间,说这个区间里要反转一次,然后给你Q个询问,问你这个位置是什么: 思路: 我们线段树维护一下就好了额: 其实反转的话,还是算次数是不是,奇偶嘛: #inc ...
打包时，指定war包的名称
在pom.xml中修改finalName节点的值即可,如下: <build> <plugins> <plugin> <groupId>org.sprin ...
unity5之代码创建状态机，玩的666
http://blog.csdn.net/litaog00/article/details/50483189 最近做项目的时候用到了状态机,网上搜了一下帖子,大部分都是简单介绍使用方法的,讲解的详细的 ...
IDEA安装actiBPM插件，亲测成功！避免直接在线安装或下载jar包硬盘都会报错问题！
在安装actiBPM之前先对IEDA进行如下设置: 开始安装网上的教程直接IDEA安装actiBPM,能安装成功,但无法打开新建bpmn文件.多次重新安装重启还是不行,苦苦弄了几个小时,最后才找到下面 ...
python-selenium-robotframework安装问题
背景当前系统安装了两个不同版本的python,分别是python27和python36(如图1),如图说明系统安装的两个python版本,python2中的python.exe默认不做修改:py ...
转 Vlan
1.支持VLAN的交换机一定是三层交换机吗?2.Trunk配置了就可以VLAN间通信吗?3.Trunk具体怎么工作的?4.VLAN间的通信到底是怎么执行的?如果说给若干个纯二层环境加上若干个路由器,我 ...
python如何永久添加模块搜索路径
win10系统依次点击:控制面板\系统和安全\系统\高级系统设置\环境变量找不到的话,直接在设置中搜索环境变量也一样此时上面是用户变量下面是系统变量在系统变量中找到PYTHO ...
layui 单选框选中事件
<div class="layui-form-item" pane=""> <label class="layui-form-lab ...

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

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

随机推荐

热门专题