Flexbox兼容性
.flex-container{
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
或者
.flex-container {
display: -moz-box; /* Firefox */
display: -ms-flexbox; /* IE10 */
display: -webkit-box; /* Safari */
display: -webkit-flex; /* Chrome, WebKit */
display: box;
display: flexbox;
display: flex;
}
Flexbox兼容性的更多相关文章
- Flexbox兼容性语法汇总
Flexbox版本 flexbox从第一次出现至今总共有三个语法版本,他们分别是: "display:box;" — 2009年的老版本 "display:flexb ...
- 移动端全兼容的flexbox速成班
说起flexbox,都算是件陈年旧事了,它是2009年W3C提出的一种全新的可伸缩的CSS布局方式.依赖flexbox,我们可以更简单,高效的完成可伸缩式页面的布局. 业界与flexbox的相关教程文 ...
- 逆天的flexbox布局
Flexbox是spankin新推出的一种CSS布局模块,拥有完美的浏览器兼容性!它可以轻易做到垂直居中.重新排序.布局的动态伸展与收缩. Flexbox兼容性参考 点击查看基本教程介绍(请用电脑上的 ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- HTML|CSS之布局相关总结
知识内容: 1.浮动相关 2.display属性 3.居中显示 4.盒模型和box-sizing 5.position属性 6.响应式设计 7.flex布局 8.其他 参考:http://zh.lea ...
- Flex布局之box-flex
box-flex的写法比flex的写法要复杂一些,兼容性的前缀要多带几个,真希望有一天flex布局能够纳入w3c标准啊! <!DOCTYPE html> <html> < ...
- flexbox布局的兼容性
http://ayqy.net/blog/flexbox布局的兼容性/ 写在前面 flex布局早在2009年就有了,而现在是2015年6月8日,使用最新的flex语法会发现支持程度并不好,即使是在“高 ...
- flexBox布局 -- 兼容性
//中间留空,两侧靠边,多行显示,每行3个,一个li的宽度是30%,最后一行,如果是两个的时候会出现异常布局,可以对最后一行的最后一个li进行right:35%,android4.4以上才支持, 所以 ...
- Flexbox 自由的布局
css3提出了一种新的布局方式.她并没有以摧枯拉朽之势博得我的喜爱.我和她的故事总是伴随着苦涩的味道.世道变了,总要做出些选择才能跟紧步伐.她很强大,能满足你天马行空的需求而不必抓掉一大把头发.她却很 ...
随机推荐
- web压力测试_(收集)
作者:ZeldaZzz链接:http://www.zhihu.com/question/19867883/answer/89775858来源:知乎著作权归作者所有,转载请联系作者获得授权. 一个完整的 ...
- TeamCity编译执行selenium上传窗口脚本缺陷
2015-07-04 18:05 编写本文 TeamCity编译selenium脚本,对于上传窗口处理只支持sendKeys的使用,不支持模拟人为按下Enter键和使用autoIt等操作,即使本地调试 ...
- oracle 绝对值小于1的数值显示小数点前面的0
SELECT DECODE(TRUNC(-.98),0,REPLACE(TO_CHAR(-.98), '.', '0.'),TO_CHAR(-.98))FROM DUAL;
- PHP面向对象之重写
覆盖(override): 基本概念 覆盖,又叫“重写”: 含义: 将一个类从父类中继承过来的属性和方法“重新定义”——此时相当于子类不想用父类的该属性或方法,而是想要定义. 覆盖的现实需要: 对于一 ...
- socket与TCP/UDP编程~
ket接口是TCP/IP网络的API,Socket接口定义了许多函数或例程,程序员可以用它们来开发TCP/IP网络上的应用程序.要学Internet上的TCP/IP网络编程,必须理解Socket接口. ...
- Android内存泄漏第一课【转】--------(使用单例模式造成的内存泄漏)
使用单例模式造成的内存泄漏 Android的单例模式在我们项目开发中经常会用到,不过使用的不恰当的话也会造成内存泄漏.因为单例的静态特性使得单例的生命周期和应用的生命周期一样长, 这就说明了如果一个对 ...
- 第161天:CSS3实现兼容性的渐变背景(gradient)效果
CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...
- luogu 2115 破坏(01分数规划)
题意:给出一个序列,删除一个连续的子串后使得剩下的平均值最小. 典型的01分数规划,令f(x)=(sum1[i]+sum2[j])/(i+j).sum1表示前缀和,sum2表示后缀和,那么我们就相当于 ...
- 基于注解的spring mvc 中使用 ajax json 的model
在 Spring mvc3中,响应.接受 JSON都十分方便. 使用注解@ResponseBody可以将结果(一个包含字符串和JavaBean的Map),转换成JSON. 使用 @RequestBod ...
- 【BZOJ1493】【NOI2007】项链工厂(线段树)
[BZOJ1493]项链工厂(线段树) 题面 BZOJ 洛谷 Description T公司是一家专门生产彩色珠子项链的公司,其生产的项链设计新颖.款式多样.价格适中,广受青年人的喜爱. 最近T公司打 ...