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 ...
随机推荐
- 聚类——GAKFCM
聚类——GAKFCM 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 参考文献:黄白梅. 基于GA优化的核模糊C均值聚类算法的研究[D]. 武汉科技大学 ...
- 《Java大学教程》—第17章 Java聚焦类框架
由所有聚焦类构成,在java.util包中,包含三个重要接口:* List列表:元素为单个对象,元素在列表中是有序.可重复* Set集合:元素为单个对象,元素在集合中无序.不可重复* ...
- ab和jmeter进行GET/POST压力测试的使用心得和比较
引言: 互联网服务压测是非常重要的评价方法,ab,webbench,jmeter等都是业界流行的测试工具,ab和webbench作为shell模式下轻量级的测试工具,jmeter则作为有GUI界面的更 ...
- 这些Linux命令,让你的工作事半功倍!
这些Linux命令,让你的工作事半功倍! 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较 ...
- Hadoop伪分布式模式安装
一.Hadoop介绍 Hadoop实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS.HDFS有高容错性的特点,并且设计用来部署在低廉的硬件上:而且 ...
- 【足迹C++primer】32、定制操作_2
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/cutter_point/article/details/32301839 定制操作_2 完整的big ...
- zabbix图形乱码问题解决办法
zabbix中的图形乱码的问题解决办法: 1.下载字体,例如:simkai.ttf楷体(注:在windows中的字体格式可能是TTC的,所以去网上下载一个ttf的字体) 2.上传到linux中(我使用 ...
- QT插件+ROS 1 安装配置
测试环境: 系统版本:Ubuntu14.04 ROS版本:indigo QT版本:5.8.0 QtCreator安装 1 安装前准备,安装相应的GNU开发工具集和OpenGL开发库, 请注意安装软件都 ...
- MyEclipse使用总结——设置MyEclipse开发项目时使用的JDK
安装好MyEclipse之后,在MyEclipse中开发项目时,默认使用的是MyEclipse是自带的JDK,如下图所示: 如果我们需要使用自己安装好的JDK,那么就需要在MyEclipse中重新设置 ...
- day25 Python
一.day24复习 class school: x=1 #__init__初始化函数,用来帮类实例化一个具体的对象 def __init__(self,name,addr): #前面的Name是一个需 ...