上代码:

这个是针对父元素:

.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的更多相关文章

  1. HTML/CSS:display:flex 布局教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  2. 整理CSS中display flex(布局利器)

    关于display:flex布局,有人了解颇深,我也是看着别人的东西学习的. display:flex的布局是什么.基本概念之类的我根本就不了解,只会用.每次看到概念之类的东西,我都是扫一眼就过去. ...

  3. CSS:display:flex详解

    水平居中很容易实现,但是一般垂直居中好像不是很好实现,一般我们都会用position.left等等进行定位:但是flex很好的解决了这个问题 Flex就是"弹性布局",现在应用很多 ...

  4. 弹性盒布局display:flex详解

    一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...

  5. CSS旧版flex及兼容

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

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

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

  7. css中的clear:both,display:flex;

    介绍两者一起讨论的原因: 在明天就国庆的日子里陪着程序员的只有代码,啤酒,还有音乐,然后就是灯光下默默陪伴自己的影子.好了,不矫情了. -------------------------------- ...

  8. display Flex 盒子模型布局兼容Android UC

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta content= ...

  9. 【css】display:flex和display:box有什么区别

    说法一: 注意:前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本.后者是2009年的语法,已经过时,是需要加上对应前缀的.所以兼容性的代码,大致如下displa ...

随机推荐

  1. 【English】20190307

    appropriate for 适用[əˈpropriɪt fɔr] appropriate for many business applications:

  2. Docker卸载镜像

    Linux服务器Docker卸载某个镜像: 首先输入命令docker images查看当前docker下有多少镜像: 1 [root@iZwz9a191mdam4di3dozk3Z ~]# docke ...

  3. 用js检测文本框中输入的是否符合条件并有错误和正确提醒

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 前端性能优化成神之路-HTTP压缩开启gzip

    什么是HTTP压缩 HTTP压缩是指: Web服务器和浏览器之间压缩传输的”文本内容“的方法. HTTP采用通用的压缩算法,比如gzip来压缩HTML,Javascript, CSS文件. 能大大减少 ...

  5. centos7下安装docker(18.1docker日志---logging driver)

    将容器的日志发送到STDOUT和STDERR是docker的默认日志行为.实际上,docker提供了多种日志机制帮助用户从容器中提取日志,这些机制被称为logging driver docker的默认 ...

  6. java发送163邮件

    在服务挂掉后,可以采用发送邮件的方式来通知开发人员进行异常处理 import java.io.IOException; import java.util.Properties; import java ...

  7. 微信小程序接入,https服务器搭建和调试

    在进行小程序开发时候,调试时候,希望在本地搭建一个https环境. 准备条件: 1.公网主机(阿里云或者腾讯云主机) 2外网访问工具natapp 步骤: 1.在主机上安装nginx(nginx转发到n ...

  8. Python 带参数的装饰器 [2] 函数参数类型检查

    在Python中,不知道函数参数类型是一个很正常的事情,特别是在一个大项目里.我见过有些项目里,每一个函数体的前十几行都在检查参数类型,这实在是太麻烦了.而且一旦参数有改动,这部分也需要改动.下面我们 ...

  9. BZOJ3110:[ZJOI2013]K大数查询(整体二分)

    Description 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位置加入一个数c.如果是2 a b c形式,表示询问从第a个位置到第b个位 ...

  10. CSAPP:第六章 存储器层次结构

    存储器层次结构 关键点:内存 6.1 随机访问存储器6.2 局部性6.3 存储器层次结构 6.1 随机访问存储器   随机访问存储器(Random-Access Memory,RAM)分为两类:静态的 ...