display：flex不兼容Android、Safari低版本的解决方案【flex布局】

引自 http://www.cnblogs.com/shimily/articles/7943370.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>flexbox布局</title>

    <style>

    div {

        border: 1px solid #000;

        overflow: hidden;

    }

    div.flex-h:before, div.flex-v:before {

        content: "before";

    }

    div.flex-h:after, div.flex-v:after {

        content: "after";

    }

    .w60 {

        width: 60px;

    }

    .w150 {

        width: 150px;

    }

    .w200 {

        width: 200px;

    }

    .h30 {

        height: 30px;

    }

    .h50 {

        height: 50px;

    }

    /* 父元素-flex容器 */

    .flex {

        display: box;              /* OLD - Android 4.4- */

        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */

        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */

        display: -ms-flexbox;      /* TWEENER - IE 10 */

        display: -webkit-flex;     /* NEW - Chrome */

        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    }

    /* 子元素-平均分栏 */

    .flex1 {

        -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */

        -moz-box-flex: 1;         /* OLD - Firefox 19- */

        width: 20%;               /* For old syntax, otherwise collapses. */

        -webkit-flex: 1;          /* Chrome */

        -ms-flex: 1;              /* IE 10 */

        flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

    }

    /* 父元素-横向排列（主轴） */

    .flex-h {

        display: box;              /* OLD - Android 4.4- */

        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */

        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */

        display: -ms-flexbox;      /* TWEENER - IE 10 */

        display: -webkit-flex;     /* NEW - Chrome */

        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

        /* 09版 */

        -webkit-box-orient: horizontal;

        /* 12版 */

        -webkit-flex-direction: row;

        -moz-flex-direction: row;

        -ms-flex-direction: row;

        -o-flex-direction: row;

        flex-direction: row;

    }

    /* 父元素-横向换行 */

    .flex-hw {

        /* 09版 */

        -webkit-box-lines: multiple;

        /* 12版 */

        -webkit-flex-wrap: wrap;

        -moz-flex-wrap: wrap;

        -ms-flex-wrap: wrap;

        -o-flex-wrap: wrap;

        flex-wrap: wrap;

    }

    /* 父元素-水平居中（主轴是横向才生效） */

    .flex-hc {

        /* 09版 */

        -webkit-box-pack: center;

        /* 12版 */

        -webkit-justify-content: center;

        -moz-justify-content: center;

        -ms-justify-content: center;

        -o-justify-content: center;

        justify-content: center;

        /* 其它取值如下：

            align-items     主轴原点方向对齐

            flex-end        主轴延伸方向对齐

            space-between   等间距排列，首尾不留白

            space-around    等间距排列，首尾留白

         */

    }

    /* 父元素-纵向排列（主轴） */

    .flex-v {

        display: box;              /* OLD - Android 4.4- */

        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */

        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */

        display: -ms-flexbox;      /* TWEENER - IE 10 */

        display: -webkit-flex;     /* NEW - Chrome */

        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

        /* 09版 */

        -webkit-box-orient: vertical;

        /* 12版 */

        -webkit-flex-direction: column;

        -moz-flex-direction: column;

        -ms-flex-direction: column;

        -o-flex-direction: column;

        flex-direction: column;

    }

    /* 父元素-纵向换行 */

    .flex-vw {

        /* 09版 */

        -webkit-box-lines: multiple;

        /* 12版 */

        -webkit-flex-wrap: wrap;

        -moz-flex-wrap: wrap;

        -ms-flex-wrap: wrap;

        -o-flex-wrap: wrap;

        flex-wrap: wrap;

    }

    /* 父元素-竖直居中（主轴是横向才生效） */

    .flex-vc {

        /* 09版 */

        -webkit-box-align: center;

        /* 12版 */

        -webkit-align-items: center;

        -moz-align-items: center;

        -ms-align-items: center;

        -o-align-items: center;

        align-items: center;

    }

    .flex-1 {

        -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */

        -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */

        -ms-flex-order: 1;              /* TWEENER - IE 10 */

        -webkit-order: 1;               /* NEW - Chrome */

        order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */

    }

    .flex-2 {

        -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */

        -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */

        -ms-flex-order: 2;              /* TWEENER - IE 10 */

        -webkit-order: 2;               /* NEW - Chrome */

        order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */

    }

    </style>

</head>

<body>

    <p>平均水平分3栏</p>

    <div class="flex-h w150 h50">

        <div class="flex1">文字文字文字文字文字文字文字</div>

        <div class="flex1">text text text text text text text text</div>

        <div class="flex1">文字文字文字文字文字文字文字</div>

    </div>

    <p>平均水平分4栏</p>

    <div class="flex-h w150 h50">

        <div class="flex1">文字文字文字文字文字文字文字</div>

        <div class="flex1">text text text text text text text text</div>

        <div class="flex1">文字文字文字文字文字文字文字</div>

        <div class="flex1">text text text text text text text text</div>

    </div>

    <p>纵向排列</p>

    <div class="flex-v w150 h50">

        <div class="flex1 w60 h50">文字文字文字文字文字文字文字</div>

        <div class="flex1 w60 h50">text text text text text text text text</div>

        <div class="flex1 w60 h50">文字文字文字文字文字文字文字</div>

        <div class="flex1 w60 h50">text text text text text text text text</div>

    </div>

    <p>横向排列 + 横向换行</p>

    <div class="flex-h w150 h50 flex-hw">

        <div class="w60 h50">文字文字文字文字文字文字文字</div>

        <div class="w60 h50">text text text text text text text text</div>

        <div class="w60 h50">文字文字文字文字文字文字文字</div>

        <div class="w60 h50">text text text text text text text text</div>

    </div>

    <h6>Android4.2.2不支持换行</h6>

    <p>竖直居中</p>

    <div class="flex-h flex-vc w200 h50">

        <div class="w60 h30">文字文字文字文字文字文字文字</div>

        <div class="w60 h30">text text text text text text text text</div>

    </div>

    <p>水平居中</p>

    <div class="flex-h flex-hc w200 h50">

        <div class="w60 h30">文字文字文字文字文字文字文字</div>

        <div class="w60 h30">text text text text text text text text</div>

    </div>

    <p>居中</p>

    <div class="flex-h flex-hc flex-vc w200 h50">

        <div class="w60 h30">文字文字文字文字文字文字文字</div>

        <div class="w60 h30">text text text text text text text text</div>

    </div>

    <p>改变顺序（栅格布局，最终效果英文应该在左边）</p>

    <div class="flex-h w200 h50">

        <div class="flex1 flex-2">文字文字文字文字文字文字文字</div>

        <div class="flex1 flex-1">text text text text text text text text</div>

    </div>

    <h6>Android4.2.2下伪元素位置表现不一致</h6>

</body>

</html>

display：flex不兼容Android、Safari低版本的解决方案【flex布局】的更多相关文章

转：display：flex不兼容Android、Safari低版本的解决方案【flex布局】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决
Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部滑动前: 滑动后: ...
[iOS开发]Xcode8兼容iOS7以及低版本Xcode调试高版本iOS系统
现在的项目一般都要兼容iOS7系统,同时也要兼容iOS10,在Xcode8上面,默认情况下无法调试iOS7,因为缺乏调试iOS7需要的配置文件.同时在低版本的Xcode上面(8以下),也无法调试iOS ...
Xcode8兼容iOS7以及低版本Xcode调试高版本iOS系统
我们使用Xcode8新建的工程,默认支持的最低系统是iOS8,我们可以手动更改版本到7.0,但是不支持真机调试. 现在的项目一般都要兼容iOS7系统,同时也要兼容iOS10,在Xcode8上面,默认情 ...
Android 之低版本高版本实现沉浸式状态栏
沉浸式状态栏确切的说应该叫做透明状态栏.一般情况下,状态栏的底色都为黑色,而沉浸式状态栏则是把状态栏设置为透明或者半透明. 沉浸式状态栏是从android Kitkat(Android 4.4)开始出 ...
IOS:兼容ios6和低版本
viewDidUnload在ios6开始被弃用了,所以我们在这里处理内存警告的这类问题,这个时候我们就要把相应的处理放在 didReceiveMemoryWarning中. - (void)didRe ...
android popupwindow低版本报空指针
在项目中使用Popupwindow pop=new Popupwindow();在2.3版本报异常信息: Exception: null 堆栈信息: android.widget.PopupWind ...
Fundebug前端JavaScript插件更新至1.8.0，兼容低版本的Android浏览器
摘要: 兼容低版本Android浏览器,请大家及时更新. Fundebug前端BUG监控服务 Fundebug是专业的程序BUG监控平台,我们JavaScript插件可以提供全方位的BUG监控,可以帮 ...
ie低版本内核事件兼容问题（事件绑定，绑定事件自动执行，文档模式问题）
问题情况搜狗等,兼容模式下,以前前端写的点击事件的代码没有, 后来一看是因为兼容模式为9,导致点击事件失效解决办法,步骤 1,处理绑定事件兼容问题 ie低版本绑定事件只支持attactevent, ...

随机推荐

loj2013 「SCOI2016」幸运数字
点分治+线性基 (为了这六个字窝调了一下午一晚上QAQ #include <iostream> #include <cstring> #include <cstdio&g ...
【Codeforces Round #476 (Div. 2) [Thanks, Telegram!] C】Greedy Arkady
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举那个人收到了几次糖i. 最好的情况显然是其他人都只收到i-1次糖. 然后这个人刚好多收了一次糖也即 (i-1)kx + x & ...
apple苹果产品国行和港行的区别
[iPhone国行和港行的区别]国行:耳机只能用在苹果设备上,不能用其它设备.充电器不用转接,直接可以用,保修的时候如果换新了,重新计算一年保修期.国行是三网通用.港行:耳机可以用在任何设备上.充电器 ...
深入了解ASO
ASO对于一些人来说可能很陌生,很多人都听说过SEO,没有听说过ASO(我也是最近才知道这个领域),因为这是一个数字营销的一个新领域.ASO(App Store Optimization)是为了让自己 ...
Leetcode 456.132模式
132模式给定一个整数序列:a1, a2, ..., an,一个132模式的子序列 ai, aj, ak 被定义为:当 i < j < k 时,ai < ak < aj.设计 ...
Leetcode 430.扁平化多级双向链表
扁平化多级双向链表您将获得一个双向链表,除了下一个和前一个指针之外,它还有一个子指针,可能指向单独的双向链表.这些子列表可能有一个或多个自己的子项,依此类推,生成多级数据结构,如下面的示例所示. 扁 ...
在Asp.net MVC中添加一个全局的异常处理的过滤器及Log4Net的使用
1:捕获异常新建一个异常处理的类MyExceptionAttribute捕获异常信息. //写到日志中.多个线程同时操作一个文件,造成文件的并发,这时用队列 public static Queue&l ...
【Luogu】P2150寿司晚宴（状压DP）
题目链接反正……我是没什么想法了,全程看题解 (或者说自己想了半天错解) 因为大于根n的质数最多只会在一个数里出现一种,所以可以把数拆成两部分:小数的二进制集合和大数. 然后把大数一样的放到一起DP ...
详解keepalived配置和使用
标签:keepalived 原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任.http://lanlian.blog.51cto.com/6790 ...
c#.NET的事件与委托例子
原文发布时间为:2008-07-25 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

display：flex不兼容Android、Safari低版本的解决方案 【flex布局】

display：flex不兼容Android、Safari低版本的解决方案 【flex布局】的更多相关文章

随机推荐

热门专题

display：flex不兼容Android、Safari低版本的解决方案【flex布局】

display：flex不兼容Android、Safari低版本的解决方案【flex布局】的更多相关文章