上代码:

这个是针对父元素:

.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. 20个必不可少的Python库

    转载:http://www.python123.org/tutorials/58b41f2a28c8f30100bd41dc 读者们好.今天我将介绍20个属于我常用工具的Python库,我相信你看完之 ...

  2. 15.scrapy中selenium的应用

    引入 在通过scrapy框架进行某些网站数据爬取的时候,往往会碰到页面动态数据加载的情况发生,如果直接使用scrapy对其url发请求,是绝对获取不到那部分动态加载出来的数据值.但是通过观察我们会发现 ...

  3. linux编译64bitHadoop (eg: ubuntu14.04 and hadoop 2.3.0)

    Hadoop官网提供的编译好的hadoop-2.3.0.tar.gz二进制包是在32位系统上编译的,在64系统上运行会有一些错误,比如: WARN util.NativeCodeLoader: Una ...

  4. router-link 自定义点击事件

    <li v-for="(item, index) in menuList"> <router-link class="classify" ta ...

  5. RocketMQ事务消息-demo

    RocketMQ为4.3.0版本(我这种写法4.2.0不行) 如果你之前用的其他版本,需要去修改下系统的环境变量 maven工程用到的jar包 <dependencies> <!-- ...

  6. 转://Linux大内存页Oracle数据库优化

    PC Server发展到今天,在性能方面有着长足的进步.64位的CPU在数年前都已经进入到寻常的家用PC之中,更别说是更高端的PC Server:在Intel和AMD两大处理器巨头的努力下,x86 C ...

  7. Xmind8 破解

    链接: https://pan.baidu.com/s/1IaNyngxJnKDQ0dNqPasA7w 提取码: g3q2 步骤1: 下载安装XMind 8 . 百度网盘下载: https://pan ...

  8. 吴恩达课后作业学习2-week2-优化算法

    参考:https://blog.csdn.net/u013733326/article/details/79907419 希望大家直接到上面的网址去查看代码,下面是本人的笔记 我们需要做以下几件事:  ...

  9. 自定义的库加载不进来,因为库中import的PIL和pillow文件没有pip install

    1.自定义的库,加载进来,提示red不能识别这个class或moudle 2.应该展开细节多看下,细节中提示,没有PIL和pillow 3.这个时候在cmd中使用pip安装PIL和pillow pip ...

  10. PAT A1052 Linked List Sorting (25 分)——链表,排序

    A linked list consists of a series of structures, which are not necessarily adjacent in memory. We a ...