上代码:

这个是针对父元素:

.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. 记录参加QCon2017北京站的心得

    如有侵权,请告知作者删除.scottzg@126.com 很荣幸参加QCon全球软件开发大会,这里特别感谢我们部门的总经理,也是<互联网广告算法和系统实践>此书的作者王勇睿.因为他我才有这 ...

  2. 关于pycharm中使用charts无法显示图表的问题(属于个人粗心问题)

    在练习用charts库对爬取的数据进行数据分析并图表化时遇到一个问题,无法显示图表,如下: 经过重装charts库等一顿折腾后,终于发现一个问题,看这里: def data_gen(type): le ...

  3. 《Java大学教程》—第22章 多线程程序

    22.2 进程(process):P551时间切片(time-slicing):处理器只是完成了一个任务的一部分工作,然后完成下一个任务的一部分工作,因为处理吕每次完成工作的时间都非常短,因此看起来这 ...

  4. Linux的基础命令

    -shutdown –h now(root用户才有效)     立即关机 -shutdown –r now(root用户才有效)     立即重新启动计算机 -reboot               ...

  5. dp 洛谷P1977 出租车拼车 线性dp

    题目背景 话说小 x 有一次去参加比赛,虽然学校离比赛地点不太远,但小 x 还是想坐 出租车去.大学城的出租车总是比较另类,有“拼车”一说,也就是说,你一个人 坐车去,还是一堆人一起,总共需要支付的钱 ...

  6. 因PHP漏洞,超过4.5万个中国网站被攻击

    因PHP漏洞,超过4.5万个中国网站被攻击 日前据外媒ZDNet了解,超过4.5万个中国网站受到了试图进入网络服务器的不法分子攻击. 此次黑客利用中国网络安全公司VulnSpy在ExploitDB上发 ...

  7. 为什么黑客都不用鼠标?你听说过Linux吗?

    为什么黑客都不用鼠标?你听说过Linux吗? 微软和它的朋友们的如意算盘. 下面来看看微软的收入是怎么来的.首先,Windows系列操作系统,一个就是 800+RMB,每次升级又是几乎同样的价钱.Wi ...

  8. DataGrid获取单元格的值

    string str = (dataGrid.Columns[0].GetCellContent(dataGrid.Items[0]) as TextBlock).Text;

  9. spool

    一.常用设置 set lin 1000 --一行可容纳字符数{80|n};输出大于设置值,则折行显示set wrap on --输出行长度大于设置长度时(set lin n设置);值为on,多余字符另 ...

  10. (5)HomeAssistant 增加设备

    将设备添加到Home Assistant https://www.home-assistant.io/docs/configuration/devices/ configuration.yaml文件 ...