这几天在做项目中用到了flex布局,但是在测试的过程中发现他的兼容性实在是太差了,仅仅用到水平和垂直居中的样式,没想到兼容性代码就写了好几行。

  display:flex;

 display:-webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

  justify-content:center;

-webkit-justify-content:center;
justify-content:center;
-moz-box-pack:center;
-webkit--moz-box-pack:center;
box-pack:center;

  align-items:center;

align-items:center;
-webkit-align-items:center;
box-align:center;
-moz-box-align:center;
-webkit-box-align:center;

  此结论都来源于百度,资料网址为 https://www.cnblogs.com/yangjie-space/p/4856109.html

关于flex布局中的兼容性问题的更多相关文章

  1. flex布局中flex-basis|flex-grow|flex-shrink

    flex布局中flex-basis|flex-grow|flex-shrink 整个才是正确的算法 flex-basis(基准值) 可以设置flex布局中容器的宽度,如果同时存在width属性,将把它 ...

  2. flex布局中flex-grow与flex-shrink的计算方式

    CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局,其中决定 Flex 布局内项目宽度/高度的是三个属性: flex-basis, flex-grow, flex-shrink. flex ...

  3. svg矢量图在flex布局中样式扭曲的问题

    问题机型 小米5 华为nova 其他未知的可能机型 问题描述 利用flex 布局的一行中, 左一样式: -webkit-box-flex: 0; flex: 0 1 auto; 左二样式: -webk ...

  4. flex布局中transform出错

    在flex布局下,若应用transform 的动画的子元素没有使用进行定位,则动画过程中,子元素将相对display:flex的元素进行static定位 动画结束后位置正常: 修复代码只需要posit ...

  5. flex布局中flex属性运用在随机发红包的算法上

    flex布局是现在前端基本上都会运用的一种布局,基本上用到比较多的是父元素设置display:flex,两个子元素,一个设置固定宽度,另一个设置为flex:1(这里都指flex-direction为r ...

  6. flex布局中父容器属性部分演示效果

    如图可见flex的属性分为父容器和子容器的属性共12个.关于这些属性具体代表什么意思,网上有很多教程的文章,自觉不能写得比别人更好,所以这里主要写了一些例子关于父容器属性效果的演示,希望可以帮助大家理 ...

  7. 微信小程序-flex布局中align-items和align-self区别

    首先看看菜鸟教程中关于align-items和align-self的定义 align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式.(对 ...

  8. flex布局中flex-shrink的计算规则

    下面代码来自MDN html部分: <p>the width of content is 500px, flex-basic of flex item is 120px.</p> ...

  9. flex布局中的主轴和侧轴的确定

    1.主轴和侧轴是通过flex-direction确定的 如果flex-direction是row或者row-reverse,那么主轴就是justify-contain 如果flex-direction ...

随机推荐

  1. Javascript关于JSON集合的几种循环方法

    /** * 根据json数据生成option树形控件 * 如果有children节点则自动生成树形数据 * @param {JSON} data * @param {int} n 节点深度 * @pa ...

  2. AI:机器人与关键技术--总是被科普

    AI:机器人与关键技术--总是被科普 原文链接:www.csdn.net/article/2014-04-22/2819430 机器人发展建议: 有需求才有生产,有更高的需求才有发展: 第一条:我们的 ...

  3. 为什么java io流必须得关闭

    当我们new一个java流对象之后,不仅在计算机内存中创建了一个相应类的实例对象.而且,还占用了相应的系统资源,比如:文件句柄.端口.数据库连接等.在内存中的实例对象,当没有引用指向的时候,java垃 ...

  4. 序列模型(4)----门控循环单元(GRU)

    一.GRU 其中, rt表示重置门,zt表示更新门. 重置门决定是否将之前的状态忘记.(作用相当于合并了 LSTM 中的遗忘门和传入门) 当rt趋于0的时候,前一个时刻的状态信息ht−1会被忘掉,隐藏 ...

  5. RESTful API设计方法

    1.如果已经开始逐步的接触到了RESTful API设计方法的朋友,首先要对HTTP/HTTPS有一个大致的了解,虽然本身和RESTful API没有什么关系.但是对于增加网站的安全性还是十分重要的, ...

  6. 【JavaScript框架封装】JavaScript中的文本字符串的转义和反转义的实现

    如果是想把本地的一个字符串串存到服务器,再次取出来的还是文本的话,就需要这个文本字符串的转义: /** * 对一个字符串的转义 * @param str * @return {*} */ functi ...

  7. css实现三栏水平布局双飞翼与圣杯布局

    作为布局的入门级选手,网上也查看了很多信息和资源 双飞翼的html结构 <div class="container"> <div class="main ...

  8. nyoj399-整除个数

    整除个数 时间限制:3000 ms  |  内存限制:65535 KB 难度:1 描述 1.2.3- -n这n(0<n<=1000000000)个数中有多少个数可以被正整数b整除. 输入 ...

  9. js 时间转换

    //时间转换成时间戳 function DateToUnix(string) { var f = string.split(' ', 2); var d = (f[0] ? f[0] : '').sp ...

  10. RobotFrameWork+APPIUM实现对安卓APK的自动化测试----第五篇【AppiumLibrary校验函数介绍】

    http://blog.csdn.net/deadgrape/article/details/50619050 以上连作者先跪一下方便面,在上一篇中,作者遗漏了两个常用的函数: 1.长按 Long P ...