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 ...
随机推荐
- js原生动态创建表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python3编写网络爬虫16-使用selenium 爬取淘宝商品信息
一.使用selenium 模拟浏览器操作爬取淘宝商品信息 之前我们已经成功尝试分析Ajax来抓取相关数据,但是并不是所有页面都可以通过分析Ajax来完成抓取.比如,淘宝,它的整个页面数据确实也是通过A ...
- 用惯图形界面的SVNer,如何突破Git----简单教程
1.使用Git,首先安装好Git,它会赠送一个Git Bash给你 2.接下来,踩第一个坑----SSH连接,我们知道用Git关联本地仓库可以用SSH和HTTP两种方式,为什么不用HTTP,因为 不! ...
- git 冲突解决的方法
版权声明:本文为博主原创文章,未经博主同意不得转载. 新博客地址:www.atomicdevelop.com https://blog.csdn.net/believer123/article/det ...
- HTTP请求行、请求头、请求体详解
HTTP 请求头各参数具体含义 Header 解释 示例Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/htmlAccept-Charset 浏览器可以接 ...
- docker 15 dockerfile案例-CMD、ENTRYPOINT案例
CMD.ENTRYPOINT都是指定一个容器启动时要运行的命令.但是CMD会覆盖前面的参数,而ENTRYP会追加组合原来的参数 未完待续...
- python:while循环、运算符、初始编码
while循环 while -- 关键字 while 条件: 缩进代码块 以上循环是(死循环) 终止循环的方法 1.break 跳出循环,并且把循环给干掉了 2.continue 跳出本次循环,继续下 ...
- vsftpd 有关vsftpd的3个注意事项。。sshd[pid]: fatal: chroot into directory without nodev and either noexec or nosuid
今天帮助已好友配置vsftpd,可能是长时间不用这个东西了,竟然这里个半天才把需求折腾完, 其实需求简单,就是使用系统账户登录,不可跳转目录,限制权限,只能上次不能下载. 懵逼一: 最开始配置sftp ...
- [MicroPython]TurniBit开发板旋转按钮控制脱机摆动
一.实验目的: ?学习在PC机系统中扩展简单I/O 接口的方法 ?学习TurnipBit拼插编程 ?了解舵机工作原理 ?学习TurnipBit扩展板舵机和旋转按钮接线方式 二.所需原器件: ?Turn ...
- Linux下配置mysql远程访问
1 编辑mysql的配置文件 mysqld.cnf root@iZwz99xkrnh5xye3zgi4btZ:~# vi /etc/mysql/mysql.conf.d/mysqld.cnf 2 把 ...