css兼容display: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+ */
}
父元素设为display:flex;没有问题,但子元素flex:1这种标注在safari中不能用!
子元素使用的话只能设为flex:auto,如果想实现flex:1这种效果,请用:
flex-grow:;
flex-shrink:;
flex-basis:;
这三个拆分的元素代替,flex属性就是上面三个属性的复合简写。
css兼容display:flex的更多相关文章
- HTML/CSS:display:flex 布局教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- 整理CSS中display flex(布局利器)
关于display:flex布局,有人了解颇深,我也是看着别人的东西学习的. display:flex的布局是什么.基本概念之类的我根本就不了解,只会用.每次看到概念之类的东西,我都是扫一眼就过去. ...
- CSS:display:flex详解
水平居中很容易实现,但是一般垂直居中好像不是很好实现,一般我们都会用position.left等等进行定位:但是flex很好的解决了这个问题 Flex就是"弹性布局",现在应用很多 ...
- 弹性盒布局display:flex详解
一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...
- CSS旧版flex及兼容
× 目录 [1]适用范围 [2]伸缩项目 [3]伸缩流方向[4]伸缩流换行[5]主轴对齐[6]伸缩性[7]显示顺序[8]flex兼容 前面的话 flex弹性盒模型有3个版本: 旧版本.混合版本和新版本 ...
- CSS弹性盒布局(display:flex)
CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...
- css中的clear:both,display:flex;
介绍两者一起讨论的原因: 在明天就国庆的日子里陪着程序员的只有代码,啤酒,还有音乐,然后就是灯光下默默陪伴自己的影子.好了,不矫情了. -------------------------------- ...
- display Flex 盒子模型布局兼容Android UC
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content= ...
- 【css】display:flex和display:box有什么区别
说法一: 注意:前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本.后者是2009年的语法,已经过时,是需要加上对应前缀的.所以兼容性的代码,大致如下displa ...
随机推荐
- 附2 rabbitmq用户管理、角色管理与权限管理
本文摘自:http://my.oschina.net/hncscwc/blog/262246 1. 用户管理 用户管理包括增加用户,删除用户,查看用户列表,修改用户密码. 相应的命令 (1) 新增一个 ...
- 【Teradata System】How Teradata uses MPP Systems
内存分配 内存初始化时将分配给操作系统和Vprocs,内存不使用部分的90%做为FSG (File Segment Cache) ,由PDE对FSG进行管理. FSG Cache:缓存常驻内存的dat ...
- Teradata数据库访问链条
- C#异步编程のParallel(并行)
Parallel是循环中开启多线程 Stopwatch watch1 = new Stopwatch(); watch1.Start(); for (int i = 1; i <= 10; i+ ...
- 使用Eclipse打jar包 包含依赖jar包
1.在项目根目录新建MANIFEST.MF文件 //版本号 Manifest-Version: 1.0 //依赖jar包路径 多个用空格隔开 Class-Path: lib/commons-loggi ...
- @property和@score.setter的用法
@property 把属性装饰成get方法 给属性赋值时,会自动调用@property装饰的方法 只设置属性的@property 时,属性为只读 @score.setter 把属性装饰成set方法 给 ...
- 性能优化——Android图片压缩与优化的几种方式
图片优化压缩方式大概可以分为以下几类:更换图片格式,质量压缩,采样率压缩,缩放压缩,调用jpeg压缩等1.设置图片格式Android目前常用的图片格式有png,jpeg和webp,png:无损压缩图片 ...
- 100Mbps和100Mb/s有什么不同
100Mbps 和 100Mb/s 有什么不同 Mbps=Mbit/s即兆比特每秒.Million bits per second的缩写 传输速率是指设备的的数据交换能力,也叫“带宽”,单位是Mbps ...
- javascript中数组化的一般见解
javascript中数组化的一般见解,数组化浏览器中存在许多类数组对象,往往对类数组操作比较麻烦,没有数组那些非常方便的方法,在这种情况下,就有了数组化方法. 数组化的一般方法 1.第一种也是我们最 ...
- Python学习笔记(1)-列表
列表是什么? 列表由一系列按特定顺序排列的元素组成.列表看起来像这样:[1,2,3,4,1].在列表中,可以由零个或多个元素组成,元素之间用逗号分开,具有相同值元素允许出现多次 使用[ ]或list( ...