flex在众多手机浏览器上的兼容方案(亲测华为手机自带浏览器)

  • 如果项目使用构建工具,可加autoprefixer来处理,[autoprefixer使用指南]
  • 纯手写css兼容代码,需给每个使用的属性加上属性前缀
    /*display: flex;写法*/
    span {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    }
    /*justify-content: center*/
    span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    }
    /*align-items: center*/
    span {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    }
    /*flex: 1*/
    span {
    -webkit-box-flex:;
    -ms-flex:;
    flex:;
    display: block;
    width: 0%;
    }

    注意:给flex添加前缀并不是万能的,其原因是不能用行内元素,要改成block才能更好的支持flex,当元素使用flex:1时,要增加width:0%; 且不能使用margin:0 auto;

flex兼容性问题的更多相关文章

  1. css flex兼容性

    我测试了一下css flex的兼容性 已经可以兼容到IE10了呀 为啥MDN上面的IE兼容性还是兼容到IE11 有点更新不及时的感觉

  2. flex 兼容性写法

    flex http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阮一峰老师详解 box 用于父元素的样式: display: box; 该属 ...

  3. IOS8 对flex兼容性问题

    问题: IOS8.2 dispaly:flex:不生效: 注意一下兼容写法的顺序问题,  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Saf ...

  4. flex兼容性之Webpack3+postcss+sass+css

    1:⚠️⚠️ 首先安装依赖 npm install --save-dev webpack style-loader css-loader postcss-loader sass-loader auto ...

  5. 页面常见布局以及实现方法--flex

    页面布局是前端工程师的基本功之一,总结分析各种布局实现方法,可以让自己快速定位哪种方法实现功能,同时可以做到现最大程度的兼容. 一.水平居中 假设:最基本机构 .parent>.child 1. ...

  6. 用Flex实现常见的几种布局

    用Flex实现常见的几种布局 1.水平,垂直居中. <style type="text/css"> .container{ display: flex; width: ...

  7. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  8. 几种常见布局的flex写法

    flex布局目前基本上兼容主流的浏览器,且实现方式简单.我整理了flex的一些知识点,并且总结归纳了几种常见布局的flex写法 ​flex基础知识点 flex-grow和flex-shrink相关计算 ...

  9. CSS垂直水平居中方法总结

    在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...

随机推荐

  1. iOS开发-自动隐藏键盘及状态栏

    1.隐藏状态栏 iOS升级至7.0以后,很多API被废止,其中原有隐藏状态栏StatusBar的方法就失效了. 原有方案 [[UIApplication sharedApplication] setS ...

  2. VScode中支持Python虚拟环境

    要在VScode中使用Python的virtualenv虚拟环境,首先在设置同添加虚拟环境所在目录和虚拟环境的识别规则: { ... "python.venvPath": &quo ...

  3. java—单例设计模式

    单例设计模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 1.构造方法私有化 2.声明一个本类对象 3.给外部提供一个静态方法获取对象实例 什么时候使用? 1.通过在工具类的设计中使用: ...

  4. Android Design Support Library——Navigation View

    前沿 Android 从5.0开始引入了Material design元素的设计,这种新的设计语言让整个安卓的用户体验焕然一新,google在Android Design Support Librar ...

  5. [原创]Entity Framework查询原理

    前言 Entity Framework的全称是ADO.NET Entity Framework,是微软开发的基于ADO.NET的ORM(Object/Relational Mapping)框架.Ent ...

  6. redis源码学习-dict

    1.字典相关的几个结构体 dict由hash table存储key-value, hash table数组每一个元素存放dictEntry链接的链表头结点,dictEntry节点存放key-value ...

  7. 走进javascript——它是什么?

    javascript不是什么 如<把时间当作朋友>的作者所说,"有些时候,有些事物,从反面描述比从正面描述更为容易.如若先仔细说清楚这本书不是什么,之后,至于它究竟是什么,很可能 ...

  8. filebeat-2-通过kafka队列链接logstash

    filebeat 直接到logstash, 由于logstash的设计问题, 可能会出现阻塞问题, 因为中间使用消息队列分开 可以使用redis, 或者kafka, 这儿使用的是kafka 1, 安装 ...

  9. jdk8-lambda表达式的使用

    1, 遍历list集合 List<Integer> list = new ArrayList<>(); list.add(1); list.add(2); list.add(3 ...

  10. ActiveMQ——activemq的报错见解javax.jms.JMSException: Software caused connection abort: recv failed

    activeMQ出现javax.jms.JMSException: Software caused connection abort: recv failed的问题解决 一直找不到原因,原来是在本地的 ...