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兼容问题的更多相关文章

  1. ES6兼容ie9, flex兼容ie9

    vue兼容ES6 在 ie9 的环境上,es6 的部分新对象.表达式,并不支持,解决方案是使用 babel-polyfill 组件,它可以将 es6 的代码翻译成低版本浏览器可以识别的 es5 代码 ...

  2. css flex 兼容ios android--商品展示 添加购物车

    https://blog.csdn.net/u010035608/article/details/52711248 <!DOCTYPE html> <html> <hea ...

  3. 解决UC浏览器或微信浏览器上flex兼容问题

    在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...

  4. flex(兼容写法)

    CSS样式 flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水 ...

  5. CSS之flex兼容

    我觉得写的很好的文章,但是我又没有时间去整理的. https://blog.csdn.net/u010130282/article/details/52627661 百分比 是在宽度自适应的时候要用 ...

  6. flex兼容新

    /* 子元素-平均分栏 */.flex1 { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OL ...

  7. CSS旧版flex及兼容

    × 目录 [1]适用范围 [2]伸缩项目 [3]伸缩流方向[4]伸缩流换行[5]主轴对齐[6]伸缩性[7]显示顺序[8]flex兼容 前面的话 flex弹性盒模型有3个版本: 旧版本.混合版本和新版本 ...

  8. Flex布局总结

    2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能.lex布局将成为未来布局 ...

  9. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

随机推荐

  1. 【Qt开发】V4L2 API详解 Buffer的准备和数据读取

    前面主要介绍的是:V4L2 的一些设置接口,如亮度,饱和度,曝光时间,帧数,增益,白平衡等.今天看看V4L2 得到数据的几个关键ioctl,Buffer的申请和数据的抓取. 1. 初始化 Memory ...

  2. 【Qt开发】Qt中图像的显示与基本操作

    Qt可显示基本的图像类型,利用QImage.QPxmap类可以实现图像的显示,并且利用类中的方法可以实现图像的基本操作(缩放.旋转). 1. Qt可显示的图像类型 参考Qt的帮助文档,可支持的类型,即 ...

  3. 简述Vue的路由与视图

    1.vue-router 安装方式 npm/cnpm:(个人偏向于cnpm) npm/cnpm install vue-router --save-dev bower: bower install v ...

  4. nodejs 对接微信 express 对接微信

    安装引用 npm install express npm install body-parser npm install express-xml-bodyparser npm install axio ...

  5. debian上安装mysql server

    1 将mysql添加到apt的repository中 第一步,下载mysql提供的ppa文件 wget https://dev.mysql.com/get/mysql-apt-config_0.8.1 ...

  6. 全新一台node节点加入到集群中

    目录 前言 对新节点做解析 方法一 hosts 文件解析 方法二 bind 解析 测试 分发密钥对 推送 CA 证书 flanneld 部署 推送flanneld二进制命令 推送flanneld秘钥 ...

  7. servlet3.0文件上传与下载

    描述:文件上传与下载是在JavaEE中常见的功能,实现文件上传与下载的方式有多种,其中文件上传的方式有: (1)commons-fileupload: (2)Servlet 3.0 实现文件上传 (3 ...

  8. 程序员听到bug后的N种反应…

    程序员的世界里, 不止有代码, 还有bug,bug,bug- 当出现bug时, 程序员们的反应是怎样的呢? 作者:苏小喵,来源:小花小画(微信号:hua-little) - END - 推荐阅读: 1 ...

  9. Enlarge GCD(素数筛)

    题意 删去最少的数,使gcd变大 题解 只要保留相同素数因子最多的数即可. 素数筛. C++代码 #include<bits/stdc++.h> using namespace std; ...

  10. 使用SecureCRT 8.5快速打开sftp传输文件

    一般使用Windows系统上安装的SecureCRT 8.5软件远程连接Linux服务器,通常给Linux系统传输文件或者使用FTP,或者使用SFTP等其他第三方软件,有时Linux系统上还需要做其他 ...