display:flex作为C3的新属性,还是有的浏览器不支持的,那下面我们就来说一下他的兼容写法

.box{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex
}

但若是在移动端,我们只要写-webket-的就好了

align-items: center;
-webkit-box-align: center; flex-direction: column;
-webkit-box-orient: vertical; justify-content: space-between;
-webkit-box-pack: justify; justify-content: flex-start;
-webkit-box-pack: start; justify-content: center;
-webkit-box-pack: center;

看到这些应给也就能找到规律了吧。

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

  1. ES6兼容ie9, flex兼容ie9

    vue兼容ES6 在 ie9 的环境上,es6 的部分新对象.表达式,并不支持,解决方案是使用 babel-polyfill 组件,它可以将 es6 的代码翻译成低版本浏览器可以识别的 es5 代码 ...

  2. css flex 兼容ios android--商品展示 添加购物车

    https://blog.csdn.net/u010035608/article/details/52711248 <!DOCTYPE html> <html> <hea ...

  3. 解决UC浏览器或微信浏览器上flex兼容问题

    在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...

  4. flex(兼容写法)

    CSS样式 flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水 ...

  5. CSS之flex兼容

    我觉得写的很好的文章,但是我又没有时间去整理的. https://blog.csdn.net/u010130282/article/details/52627661 百分比 是在宽度自适应的时候要用 ...

  6. flex兼容新

    /* 子元素-平均分栏 */.flex1 { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OL ...

  7. CSS旧版flex及兼容

    × 目录 [1]适用范围 [2]伸缩项目 [3]伸缩流方向[4]伸缩流换行[5]主轴对齐[6]伸缩性[7]显示顺序[8]flex兼容 前面的话 flex弹性盒模型有3个版本: 旧版本.混合版本和新版本 ...

  8. Flex布局总结

    2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能.lex布局将成为未来布局 ...

  9. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

随机推荐

  1. Spark集成的包与引入包冲突

    今天在编写Spark应用的时候,想把处理结果输出为JSON字符串,查到Java比较常用的JSON处理包gson,按照其API编写代码后运行程序,总是出现"NoSuchMethodExcept ...

  2. C语言I-博客作业04

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 C语言I博客作业04 我在这个课程的目标是 掌握使用for循环语句实现指定次数的循环程序设计 这个作业在那个具体方面帮助我实现目标 在编写 ...

  3. [FJOI2007]轮状病毒 题解(dp(找规律)+高精度)

    [FJOI2007]轮状病毒 题解(dp(找规律)+高精度) 标签:题解 阅读体验:https://zybuluo.com/Junlier/note/1335733 没什么好说的,直接把规律找出来,有 ...

  4. html中设置height=100%无效的问题

    设置height=100%(网页内容能够更好的适配各种屏幕大小) 第一种是设置某个单独的div元素   height=100%无效 原因很简单,所有基于本分比的尺寸必须基于父元素,而你如果没有设置父元 ...

  5. Serilog

    参考 asp.net core使用serilog将日志推送到腾讯云日志服务

  6. C/C++ 内存与指针

    内存与指针杂谈 1.指针 1.数组指针 int(*ptr)[n] ()的优先级高,(*ptr)表示ptr是一个指针,指向一个int类型的一维数组,这个数组的长度为n,也可以说ptr的步长就是n.也就是 ...

  7. CSS完整

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...

  8. C# 中定义扩展方法

    1.编写扩展方法类 using System; using System.Collections.Generic; using System.Linq; using System.Text; name ...

  9. CRMEasy知识库访问权限

    知识库设置BCCBINFO文件夹为共享文件夹,给予普通域用户和管理员域用户完全控制权限,但是当以管理员域用户身份对文件进行操作后,以普通域用户登录不会有效果,甚至出现“访问权限”的错误,这是由于文件夹 ...

  10. tf中的meta和pb

    https://www.jianshu.com/p/af2b694eae61 简单来说,pb文件是个推理的图,meta更复杂,不能用来部署