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/ ...
随机推荐
- Chapter03 第一节 简单变量
3.1 简单变量 定义一个变量后,系统根据变量类型的不同在内存的不同区域分配一个空间,将值复制到内存中,然后用户通过变量名访问这个空间. 3.1.1 变量名 变量名的命名规则: 只能使用字母.数字.下 ...
- CentOSLinux安装Docker容器
Docker 使用 环境说明 CentOS 7.3(不准确地说:要求必须是 CentOS 7 64位) 不建议在 Windows 上使用 Docker 基本概念 官网:https://www.dock ...
- android app开发中的常用组件
1 Activity 1.1 Activity的启动 第一,android manifest中指定的主activity,点击app的icon启动进入. 第二,使用intent,在另外一个activit ...
- SVN的各种符号含义,svn的星号,感叹号,问号等含义
黄色感叹号(有冲突):--这是有冲突了,冲突就是说你对某个文件进行了修改,别人也对这个文件进行了修改,别人抢在你提交之前先提交了,这时你再提交就会被提示发生冲突,而不允许你提交,防止你的提交覆盖了别人 ...
- r子集代码实现(递归)
#!/usr/bin/env python #coding:utf-8 SET_START = 1 SET_END = 9 SUB_LEN = 10 def r_subset(i, r, pre, a ...
- python中输入某年某月某日,判断这一天是这一年的第几天?
输入某年某月某日,判断这一天是这一年的第几天?程序分析 特殊情况,闰年时需考虑二月多加一天: 直接上代码 #定义一个函数,判断是否为闰年 def leapyear(y): return (y % 40 ...
- C++的同名属性(没有虚拟属性)、同名普通函数、同名静态函数(没有虚拟静态函数),是否被覆盖
例子1:属性的覆盖#include "stdafx.h" class A {public: int i; A() { i=1; }}; class B: public A {pub ...
- 【源码解读】cycleGAN(一):网络
源码地址:https://github.com/aitorzip/PyTorch-CycleGAN 如图所示,cycleGAN的网络结构包括两个生成器G(X->Y)和F(Y->X),两个判 ...
- Response笔记
# 今日内容 1. HTTP协议:响应消息 2. Response对象 3. ServletContext对象 ## HTTP协议: 1. 请求消息:客户端发 ...
- 防抖&节流
使用的原因 在前端开发当中有一部分的用户行为会频繁操作触发事件执行,而对于DOM操作,资源加载等耗费性能的处理,很可能导致页面卡顿,甚至浏览器崩溃,函数节流和防抖就是解决类似需求应运而生的 节流 预定 ...