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 ...
随机推荐
- Linux 小知识翻译 - 「/proc 文件夹」
这次聊聊 「/proc 文件夹」. /proc 文件夹用来保管系统状态相关的文件的特殊文件夹,这个文件夹中有的文件只是内存上的虚拟文件. /proc 文件夹下有些文件可以反映各个进程的运行状态.所以说 ...
- 一个tomcat部署多个应用实例
安装JDK7sudo apt-get install java7-jdk 安装tomcat7 Tomcat7下载地址http://mirror.bjtu.edu.cn/apache/tomcat/to ...
- 从n个数里面选择m个数
从n个数里面选择m个数 #include<iostream> #include<vector> using namespace std; vector<int> s ...
- docker1.13.1的安装与卸载及mysql5.5安装实例
docker中国官方地址:https://www.docker-cn.com/ 您可以使用以下命令直接从该镜像加速地址进行拉取: $ docker pull registry.docker-cn.co ...
- Hibernate知识点总结(一)
前言:学习的过程在于不断的总结与思考,这里记下笔者在学习过程中,所遇到的知识点,增加对框架掌握的熟悉程度. 1.环境的搭建 通过maven可以轻松搭建hibernate的环境. <propert ...
- DRF 中使用 级验科技滑动验证
接口的login 登录 使用 Django 中的 auth 认证 因为之前合并了 django 的 用户表 创建的 用户 密码 会在内部进行加密 不知道加密方式所以要使用 authenticate 来 ...
- UVA1608-Non-boring sequences(分治)
Problem UVA1608-Non-boring sequences Accept: 227 Submit: 2541Time Limit: 3000 mSec Problem Descript ...
- Python:Day51 web框架
from wsgiref.simple_server import make_server def application(environ, start_response): start_respon ...
- 阿里云配置tomcat https
阿里云申请免费的SSL证书和配置https,可参考该篇博文:https://blog.csdn.net/baidu_19473529/article/details/70037976 虽然有现成的,不 ...
- <网络编程>基本TCP套接字编程
tcp提供了可靠传输,当tcp向另一端发送数据的时候,要求对端返回一个确认.如果没有接收到确认,tcp就重传数据并且等待更长时间,数次重传失败后,tcp才放弃. 建立一个tcp连接会发生如下事情: 服 ...