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. STM32 USB开发(三) 基于F105RBT6核心板开发的自定义HID收发(FS)

    硬件设计 该核心板的USB插口有两个,一个是用于USB Slave的,可以用来做HID设备,把模拟STM32模拟为U盘等:另一个是USB Host设备,可以对插上的U盘的数据进行读写. 图中J2是Mi ...

  2. ActiveMQ学习教程/2.简单示例

    ActiveMQ学习教程(二)——简单示例 一.应用IDEA构建Maven项目 File->New->Module...->Maven->勾选->选择->Next ...

  3. Git 创建分支并合并主分支

    首先,我们创建dev分支,然后切换到dev分支: $ git checkout -b dev(等价于 $ git branch dev $ git checkout dev ) Switched to ...

  4. BCD与ASCII码互转-C语言实现

    /*BCD 与 ASCII码转换*/ /******************************************************************* 函数名:  asc2bc ...

  5. kafka producer发送消息 Failed to update metadata after问题

    提示示例: ERROR Error when sending message to topic test with key: null, value: 2 bytes with error: Fail ...

  6. express 实现我猜你喜欢功能

    工具:利用cookie-parser中间件; 原理: 每次访问某一具体的文章,就表明可能客户端对这类文章感兴趣, 将这类文章的标签添加到cookie里,字段是like; 然后退回到含有 我猜你喜欢模块 ...

  7. numpy库中数组的数据类型

    numpy库中数组的数据类型 dtype是一个特殊的对象,它含有ndarray将一块内存解释为特殊数据类型所需要的信息 指定数据类型创建数组 >>> import numpy as ...

  8. HDU4471 Homework

    题目 预处理转移矩阵的\(2^k\). 然后把关键点按下标排序. 每次用类似于矩阵快速幂的方法求出两个关键点中间的转移矩阵. #include<bits/stdc++.h> using n ...

  9. python day1-requests

    一.什么是requests Requests是用python语言基于urllib编写的,采用的是Apache2 Licensed开源协议的HTTP库. 相对于urllib库(自带,无需手动安装)而言, ...

  10. [LeetCode] 140. 单词拆分 II

    题目链接 : https://leetcode-cn.com/problems/word-break-ii/ 题目描述: 给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,在字符 ...