flex兼容问题
display:flex作为C3的新属性,还是有的浏览器不支持的,那下面我们就来说一下他的兼容写法
.box{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex
}
但若是在移动端,我们只要写-webket-的就好了
align-items: center;
-webkit-box-align: center; flex-direction: column;
-webkit-box-orient: vertical; justify-content: space-between;
-webkit-box-pack: justify; justify-content: flex-start;
-webkit-box-pack: start; justify-content: center;
-webkit-box-pack: center;
看到这些应给也就能找到规律了吧。
flex兼容问题的更多相关文章
- ES6兼容ie9, flex兼容ie9
vue兼容ES6 在 ie9 的环境上,es6 的部分新对象.表达式,并不支持,解决方案是使用 babel-polyfill 组件,它可以将 es6 的代码翻译成低版本浏览器可以识别的 es5 代码 ...
- css flex 兼容ios android--商品展示 添加购物车
https://blog.csdn.net/u010035608/article/details/52711248 <!DOCTYPE html> <html> <hea ...
- 解决UC浏览器或微信浏览器上flex兼容问题
在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...
- flex(兼容写法)
CSS样式 flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水 ...
- CSS之flex兼容
我觉得写的很好的文章,但是我又没有时间去整理的. https://blog.csdn.net/u010130282/article/details/52627661 百分比 是在宽度自适应的时候要用 ...
- flex兼容新
/* 子元素-平均分栏 */.flex1 { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OL ...
- CSS旧版flex及兼容
× 目录 [1]适用范围 [2]伸缩项目 [3]伸缩流方向[4]伸缩流换行[5]主轴对齐[6]伸缩性[7]显示顺序[8]flex兼容 前面的话 flex弹性盒模型有3个版本: 旧版本.混合版本和新版本 ...
- Flex布局总结
2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能.lex布局将成为未来布局 ...
- CSS弹性盒布局(display:flex)
CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...
随机推荐
- linux ftp使用相关
ftp 7.7.6.201 21121 name:aaa password:123456
- CVE 2019 0708 安装重启之后 可能造成 手动IP地址丢失.
1. 最近两天发现 更新了微软的CVE 2019-0708的补丁之后 之前设置的手动ip地址会变成 自动获取, 造成ip地址丢失.. 我昨天遇到两个, 今天同事又遇到一个.微软做补丁也不走心啊..
- UUID与System.currentTimeMillis()产生一个新文件名的工具类
1.FileUtils.java package Utils.GenerateNewFileName; import java.util.UUID; public class FileUtils { ...
- 【ES6】对象的新功能与解构赋值
ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始 ...
- 理解 JavaScript 闭包
这是本系列的第 4 篇文章. 作为 JS 初学者,第一次接触闭包的概念是因为写出了类似下面的代码: for (var i = 0; i < helpText.length; i++) { var ...
- 【已解决】Error running 'xxx项目' Command line is too long(idea版)
[错误] Error running 'xxx项目': Command line is too long. Shorten command line for xxx or also for Sprin ...
- AutoTikv简介
AutoTikv是一个用于对TiKV数据库进行自动调优的工具.它的设计灵感来自于SIGMOD 2017的一篇paper:Automatic Database Management System Tun ...
- django事务模式
from django.db import transaction from django.db import transaction with transaction.atomic(): obj = ...
- k3 cloud中如何把一个账套中的单据部署到另一个账套中
打开bos,依次点击->解决方案->部署包管理 填写部署包名称并点击下一步 选择需要部署的单据并点击下一步 确定后点击下一步: 点击完成 找到部署路径会成一个部署包: 部署:打开部署包安装 ...
- UEditor使用报错Cannot set property 'innerHTML' of undefined
仿用UEditor的setContent的时候报错,报错代码如下Uncaught TypeError: Cannot set property ‘innerHTML’ of undefined.调试u ...