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. flask-Datatables

    我先给大家推荐一个jQuery开源库网址  http://www.jq22.com/ Datatables 是一款jquery表格插件.他是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能 ...

  2. vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html、v-cloak

    vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html.v-cloak 一.v-text和v-html <span>{{msg}}</span>  --& ...

  3. xamarin android 实现二维码带logo生成效果

    MultiFormatWriter writer = new MultiFormatWriter(); Dictionary<EncodeHintType, object> hint = ...

  4. TFS2018环境搭建一硬件要求

    本文关于微软的团队协作工具TFS2018搭建 1.操作系统要求 TFS可以安装在Windows Server和Windows PC操作系统中,但是TFS2018和2018只支持64位操作系统中,早期的 ...

  5. 计算机网络 之 TCP和UDP的端口号解析

    前言:今天了解一下tcp和udp报文的端口.发现一直以来都只是知道端口用于区分同一IP的服务器的不同服务,已经端口的大小.在查找traceroute的资料的时候,才了解到一些之前没注意到的东西. (一 ...

  6. SpringSecurity学习之基于数据库的用户认证

    SpringSecurity给我们提供了一套最基本的认证方式,可是这种方式远远不能满足大多数系统的需求.不过好在SpringSecurity给我们预留了许多可扩展的接口给我们,我们可以基于这些接口实现 ...

  7. NSLog()输出函数集格式字符

    nslog()强大的功能这里就不多说了,笔者从c#转过来,难免会有些陌生.在c#中用format("{0}",xx}来进行占位,下面就来讲讲在oc中的格式字符; d:带符号的十进制 ...

  8. Android学习总结——INSTALL_FAILED_CONFLICTING_PROVIDER

    在写个小demo的时候出现了这个问题: 排除手机内存不足.以及没用安装过这个应用的问题之后,发现是android:authorities="..."出了问题,可能还有其他应用程序和 ...

  9. 18-hadoop-weather案例

    weather案例, 简单分析每年的前三个月的最高温即可, 使用自定义的分组和排序 设计分析 设定多个reduce 每年的数据都很多,如果按照默认情况处理,统计性能是非常慢(因为默认只有一个reduc ...

  10. ElasticSearch 基础<转载>

    使用curl命令操作elasticsearch 大岩不灿 发表于 2015年4月25日 浏览 13,463 次 第一:_cat系列_cat系列提供了一系列查询elasticsearch集群状态的接口. ...