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. 机器学习实战-Logistics回归

    Logistics回归:实战,有两个特征X0,X1.100个样本,进行Logistics回归 1.导入数据 def load_data_set(): """ 加载数据集 ...

  2. 第九周总结&第七次实验报告

    实验7 实验任务详情: 完成火车站售票程序的模拟. 要求: (1)总票数1000张: (2)10个窗口同时开始卖票: (3)卖票过程延时1秒钟: (4)不能出现一票多卖或卖出负数号票的情况. 实验过程 ...

  3. [转帖]mysql数据库主从配置

    mysql数据库主从配置 https://www.toutiao.com/i6680489302947791371/ 多做实验 其实挺简单的 很多东西 要提高自信 去折腾. 架构与我 2019-04- ...

  4. CVE-2016-8655,af_packet Linux 內核通殺提權漏洞淺析

    簡單寫一下思路 這個東西需要namespace方面的支援, 首先open socket , 一連串路徑(packet_set_ring()->init_prb_bdqc()->prb_se ...

  5. 模板 - Floyd

    void Floyd(){ for(int k = 1; k <= n; ++k) { for(int i = 1; i <= n; ++i) { for(int j = 1; j < ...

  6. SharePoint自己定义程序页面部署 不用重新启动IIS

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/dz45693/article/details/30840255 SharePoint的部署方式默认是 ...

  7. Scala学习笔记(5)类

    1.简单类和无参方法 calss Counter{ private var value = 0  //必须初始字段 def increment(){value +=1} //方法默认是公有的 def ...

  8. 【问题解决方案】git仓库重构

    Linux mv命令 用来为文件或目录改名.或将文件或目录移入其它位置. 语法 mv [options] source dest mv [options] source... directory 注: ...

  9. ES6初步学习

    from:http://www.jianshu.com/p/287e0bb867ae 刚开始用vue或者react,很多时候我们都会把ES6这个大兄弟加入我们的技术栈中.但是ES6那么多那么多特性,我 ...

  10. HTML A标签 href click事件冲突

    转自:https://blog.csdn.net/xinglu/article/details/45199337