1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flexbox布局</title>
  6.     <style>
  7.     div {
  8.         border: 1px solid #000;
  9.         overflow: hidden;
  10.     }
  11.     div.flex-h:before, div.flex-v:before {
  12.         content: "before";
  13.     }
  14.     div.flex-h:after, div.flex-v:after {
  15.         content: "after";
  16.     }
  17.     .w60 {
  18.         width: 60px;
  19.     }
  20.     .w150 {
  21.         width: 150px;
  22.     }
  23.     .w200 {
  24.         width: 200px;
  25.     }
  26.     .h30 {
  27.         height: 30px;
  28.     }
  29.     .h50 {
  30.         height: 50px;
  31.     }
  32.     /* 父元素-flex容器 */
  33.     .flex {
  34.         display: box;              /* OLD - Android 4.4- */
  35.  
  36.         display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  37.         display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  38.         display: -ms-flexbox;      /* TWEENER - IE 10 */
  39.         display: -webkit-flex;     /* NEW - Chrome */
  40.         display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  41.     }
  42.     /* 子元素-平均分栏 */
  43.     .flex1 {
  44.         -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  45.         -moz-box-flex: 1;         /* OLD - Firefox 19- */
  46.         width: 20%;               /* For old syntax, otherwise collapses. */
  47.         -webkit-flex: 1;          /* Chrome */
  48.         -ms-flex: 1;              /* IE 10 */
  49.         flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  50.     }
  51.     /* 父元素-横向排列（主轴） */
  52.     .flex-h {
  53.         display: box;              /* OLD - Android 4.4- */
  54.  
  55.         display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  56.         display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  57.         display: -ms-flexbox;      /* TWEENER - IE 10 */
  58.         display: -webkit-flex;     /* NEW - Chrome */
  59.         display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  60.  
  61.         /* 09版 */
  62.         -webkit-box-orient: horizontal;
  63.         /* 12版 */
  64.         -webkit-flex-direction: row;
  65.         -moz-flex-direction: row;
  66.         -ms-flex-direction: row;
  67.         -o-flex-direction: row;
  68.         flex-direction: row;
  69.     }
  70.     /* 父元素-横向换行 */
  71.     .flex-hw {
  72.         /* 09版 */
  73.         -webkit-box-lines: multiple;
  74.         /* 12版 */
  75.         -webkit-flex-wrap: wrap;
  76.         -moz-flex-wrap: wrap;
  77.         -ms-flex-wrap: wrap;
  78.         -o-flex-wrap: wrap;
  79.         flex-wrap: wrap;
  80.     }
  81.     /* 父元素-水平居中（主轴是横向才生效） */
  82.     .flex-hc {
  83.         /* 09版 */
  84.         -webkit-box-pack: center;
  85.         /* 12版 */
  86.         -webkit-justify-content: center;
  87.         -moz-justify-content: center;
  88.         -ms-justify-content: center;
  89.         -o-justify-content: center;
  90.         justify-content: center;
  91.         /* 其它取值如下：
  92.             align-items     主轴原点方向对齐
  93.             flex-end        主轴延伸方向对齐
  94.             space-between   等间距排列，首尾不留白
  95.             space-around    等间距排列，首尾留白
  96.          */
  97.     }
  98.     /* 父元素-纵向排列（主轴） */
  99.     .flex-v {
  100.         display: box;              /* OLD - Android 4.4- */
  101.  
  102.         display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  103.         display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  104.         display: -ms-flexbox;      /* TWEENER - IE 10 */
  105.         display: -webkit-flex;     /* NEW - Chrome */
  106.         display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  107.  
  108.         /* 09版 */
  109.         -webkit-box-orient: vertical;
  110.         /* 12版 */
  111.         -webkit-flex-direction: column;
  112.         -moz-flex-direction: column;
  113.         -ms-flex-direction: column;
  114.         -o-flex-direction: column;
  115.         flex-direction: column;
  116.     }
  117.     /* 父元素-纵向换行 */
  118.     .flex-vw {
  119.         /* 09版 */
  120.         -webkit-box-lines: multiple;
  121.         /* 12版 */
  122.         -webkit-flex-wrap: wrap;
  123.         -moz-flex-wrap: wrap;
  124.         -ms-flex-wrap: wrap;
  125.         -o-flex-wrap: wrap;
  126.         flex-wrap: wrap;
  127.     }
  128.     /* 父元素-竖直居中（主轴是横向才生效） */
  129.     .flex-vc {
  130.         /* 09版 */
  131.         -webkit-box-align: center;
  132.         /* 12版 */
  133.         -webkit-align-items: center;
  134.         -moz-align-items: center;
  135.         -ms-align-items: center;
  136.         -o-align-items: center;
  137.         align-items: center;
  138.     }
  139.  
  140.     .flex-1 {
  141.         -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
  142.         -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
  143.         -ms-flex-order: 1;              /* TWEENER - IE 10 */
  144.         -webkit-order: 1;               /* NEW - Chrome */
  145.         order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  146.     }
  147.     .flex-2 {
  148.         -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  149.         -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  150.         -ms-flex-order: 2;              /* TWEENER - IE 10 */
  151.         -webkit-order: 2;               /* NEW - Chrome */
  152.         order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  153.     }
  154.     </style>
  155. </head>
  156. <body>
  157.     <p>平均水平分3栏</p>
  158.     <div class="flex-h w150 h50">
  159.         <div class="flex1">文字文字文字文字文字文字文字</div>
  160.         <div class="flex1">text text text text text text text text</div>
  161.         <div class="flex1">文字文字文字文字文字文字文字</div>
  162.     </div>
  163.     <p>平均水平分4栏</p>
  164.     <div class="flex-h w150 h50">
  165.         <div class="flex1">文字文字文字文字文字文字文字</div>
  166.         <div class="flex1">text text text text text text text text</div>
  167.         <div class="flex1">文字文字文字文字文字文字文字</div>
  168.         <div class="flex1">text text text text text text text text</div>
  169.     </div>
  170.     <p>纵向排列</p>
  171.     <div class="flex-v w150 h50">
  172.         <div class="flex1 w60 h50">文字文字文字文字文字文字文字</div>
  173.         <div class="flex1 w60 h50">text text text text text text text text</div>
  174.         <div class="flex1 w60 h50">文字文字文字文字文字文字文字</div>
  175.         <div class="flex1 w60 h50">text text text text text text text text</div>
  176.     </div>
  177.     <p>横向排列 + 横向换行</p>
  178.     <div class="flex-h w150 h50 flex-hw">
  179.         <div class="w60 h50">文字文字文字文字文字文字文字</div>
  180.         <div class="w60 h50">text text text text text text text text</div>
  181.         <div class="w60 h50">文字文字文字文字文字文字文字</div>
  182.         <div class="w60 h50">text text text text text text text text</div>
  183.     </div>
  184.     <h6>Android4.2.2不支持换行</h6>
  185.     <p>竖直居中</p>
  186.     <div class="flex-h flex-vc w200 h50">
  187.         <div class="w60 h30">文字文字文字文字文字文字文字</div>
  188.         <div class="w60 h30">text text text text text text text text</div>
  189.     </div>
  190.     <p>水平居中</p>
  191.     <div class="flex-h flex-hc w200 h50">
  192.         <div class="w60 h30">文字文字文字文字文字文字文字</div>
  193.         <div class="w60 h30">text text text text text text text text</div>
  194.     </div>
  195.     <p>居中</p>
  196.     <div class="flex-h flex-hc flex-vc w200 h50">
  197.         <div class="w60 h30">文字文字文字文字文字文字文字</div>
  198.         <div class="w60 h30">text text text text text text text text</div>
  199.     </div>
  200.     <p>改变顺序（栅格布局，最终效果英文应该在左边）</p>
  201.     <div class="flex-h w200 h50">
  202.         <div class="flex1 flex-2">文字文字文字文字文字文字文字</div>
  203.         <div class="flex1 flex-1">text text text text text text text text</div>
  204.     </div>
  205.     <h6>Android4.2.2下伪元素位置表现不一致</h6>
  206. </body>
  207. </html>

           

原文: https://blog.csdn.net/sq2879897094/article/details/80593293

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

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

    引自 http://www.cnblogs.com/shimily/articles/7943370.html <!DOCTYPE html> <html lang="en ...

  2. Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决

    Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...

  3. [iOS开发]Xcode8兼容iOS7以及低版本Xcode调试高版本iOS系统

    现在的项目一般都要兼容iOS7系统,同时也要兼容iOS10,在Xcode8上面,默认情况下无法调试iOS7,因为缺乏调试iOS7需要的配置文件.同时在低版本的Xcode上面(8以下),也无法调试iOS ...

  4. Xcode8兼容iOS7以及低版本Xcode调试高版本iOS系统

    我们使用Xcode8新建的工程,默认支持的最低系统是iOS8,我们可以手动更改版本到7.0,但是不支持真机调试. 现在的项目一般都要兼容iOS7系统,同时也要兼容iOS10,在Xcode8上面,默认情 ...

  5. Android 之低版本高版本实现沉浸式状态栏

    沉浸式状态栏确切的说应该叫做透明状态栏.一般情况下,状态栏的底色都为黑色,而沉浸式状态栏则是把状态栏设置为透明或者半透明. 沉浸式状态栏是从android Kitkat(Android 4.4)开始出 ...

  6. IOS:兼容ios6和低版本

    viewDidUnload在ios6开始被弃用了,所以我们在这里处理内存警告的这类问题,这个时候我们就要把相应的处理放在 didReceiveMemoryWarning中. - (void)didRe ...

  7. android popupwindow低版本报空指针

    在项目中使用Popupwindow pop=new Popupwindow();在2.3版本报 异常信息: Exception: null 堆栈信息: android.widget.PopupWind ...

  8. Fundebug前端JavaScript插件更新至1.8.0，兼容低版本的Android浏览器

    摘要: 兼容低版本Android浏览器,请大家及时更新. Fundebug前端BUG监控服务 Fundebug是专业的程序BUG监控平台,我们JavaScript插件可以提供全方位的BUG监控,可以帮 ...

  9. ie低版本内核事件兼容问题（事件绑定，绑定事件自动执行，文档模式问题）

    问题情况 搜狗等,兼容模式下,以前前端写的点击事件的代码没有, 后来一看是因为兼容模式为9,导致点击事件失效 解决办法,步骤 1,处理绑定事件兼容问题 ie低版本绑定事件只支持attactevent, ...

随机推荐

  1. [UE4]死亡后调整视角

    AddLocalOffset:本地坐标偏移. 脱离控制器操作 会影响“OnDie”方法里面的相机移动操作,而函数里面又不允许使用“Delay”方法,但可以使用“Set Timer By Functio ...

  2. 00008 - crontab定时执行任务命令详解

    linux 系统则是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个系统服务是默认启动的.另 外, 由于使用者自己也可以设置计划任务,所以, ...

  3. Pyhton基础知识（一）

    Pyhton基础知识(一)一.cpu 内存 硬盘 操作系统之间的关系1.cpu 中央处理器 运算中心与控制中心 相当于人的大脑.2.内存 暂时存储数据 将应用程序加载到内存 以便于cpu进行数据传输交 ...

  4. 多线程Task

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  5. (转)程序员级别鉴定书（.NET面试问答集锦）

    原文地址:http://www.cnblogs.com/powertoolsteam/p/what-net-developer-should-to-know.html 葡萄城控件 作为一个.NET程序 ...

  6. (转)C#读取MAC的几种方法

    原文地址:http://www.cnblogs.com/diulela/archive/2012/04/07/2436111.html 1 通过IPConfig命令读取MAC地址 ///<sum ...

  7. alt.js 使用教程

    1.action : import alt from "../alt.js"; class DemoActions{ constructor() { this.generateAc ...

  8. tips：可变参数列表

    tips:可变参数列表! 先来看看以往我们要传递许多参数时是怎么做的: java: public static void main(String []args){} c: int main(int a ...

  9. 搭建（WSTMart）php电商环境时缺少fileinfo函数

    搭建WSTMart环境步骤: 第一步:安装phpstudy,一键安装即可 第二步:把下好的系统源码,放到一个文件夹中,并放到刚刚安装好的phpstudy下WWW文件夹下,如WWW>WSTMart ...

  10. 在Linux命令行执行python命令

    在Linux的命令行执行python的某些命令: [root@centos7 ~]# echo "import sys ;print(sys.path)"|python3.6 [' ...