这几天在做项目中用到了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. java学习笔记1——继承

    通过在类的声明中加入extends子句创建一个子类并继承父类的成员变量和方法.如: class SubClass extends SuperClass{ ... } 若SuperClass是另一个类的 ...

  2. 【技术累积】【点】【java】【5】Random和shuffle()

    闲聊 妈耶,又这么久没写了..不过最近写其他文章有点多啊... 今天用到Random这个类,竟然还要去查了下... 基本概念 Random类,背后是伪随机数(数学上的东西): 不是很理解,但是基本上而 ...

  3. HashMap以及ConcurrentHashMap

    HashMap源码相关 HashMap实现原理及源码分析 总之就是这个博客,简直就是源码带逛,开心,最关键的是下面的图像 另外,自己的理解加上源码,总结如下 hash,原义散列,就是一对一: hash ...

  4. MVC ViewData和ViewBag 参数名一样表示同一个值

    @ViewData["MenuName"] 和 @ViewBag.MenuName 表示同一个值

  5. Bootstrap 有一个 class 属性叫做 well,它的作用是为设定的列创造出一种视觉上的深度感

    Bootstrap 有一个 class 属性叫做 well,它的作用是为设定的列创造出一种视觉上的深度感

  6. 人工智能 Python 入门视频

    Python, 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年发明,第一个公开发行版发行于1991年.       Python是纯粹的自由软件, 源代码和解 ...

  7. vc++如何创建程序-析构函数01

    #include<iostream.h>class Point{public: int x; int y; Point() { x=0; y=0; }//构造函数是用来创建函数本身,那么, ...

  8. Redmine 甘特图导出 PDF 和 PNG 中文乱码问题

    Redmine使用了RMagick来处理图片,fpdf处理PDF,并在调用时设定了字体PDF中文字体 redmine 中关于PDF字体设置的代码 case pdf_encoding           ...

  9. 何为JQuery对象?

  10. kernel 3.10内核源码分析--hung task机制

    kernel 3.10内核源码分析--hung task机制 一.相关知识: 长期以来,处于D状态(TASK_UNINTERRUPTIBLE状态)的进程 都是让人比较烦恼的问题,处于D状态的进程不能接 ...