这几天在做项目中用到了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. 搞不懂的算法-排序篇<1>

    最近在学习算法,跟着<Algorithms>这本书,可能是自己水平不够吧,看完排序算法后各种,希尔,归并,快排,堆的实现在脑子里乱成一锅粥,所以就打算大概总结一下,不求精确,全面,只想用平 ...

  2. mongodb主从副本集配置

    创建路径: mkdir -p /datassd/mongo_20011/{data,conf,log}     配置文件示例: #mongo.conf dbpath=/datassd/mongo/da ...

  3. CSS text-transform 属性 控制控制文本的大小写

    值 描述 none 默认.定义带有小写字母和大写字母的标准的文本. capitalize 文本中的每个单词以大写字母开头. uppercase 定义仅有大写字母. lowercase 定义无大写字母, ...

  4. <轉>APUE:mmap函数

    起初 看过一遍内存映射I/O,意思大概是懂了,就是直接操作文件再而直接通过缓冲区来操作,减少一些read.write调用所花费的时间.加上文中给出一个copy的例子,意思也好理解的.不过困扰的来了,我 ...

  5. matlab学习-使用自带的函数

    >> %定义矩阵求最大值>> a=[1 7 3;6 2 9];>> A=max(a);>> a a = 1 7 3 6 2 9 >> A A ...

  6. JS 从36个数字里面随机抽取8个

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. [luogu P2590 ZJOI2008] 树的统计 (树链剖分)

    题目描述 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. QMAX u ...

  8. Spring MVC 的概念1

    ---恢复内容开始--- SpringMVC是一个采用模型----视图------控制器(MVC)的WEb框架建立在中央前端控制器的 Servlet(DispatcherServlet),他负责发送每 ...

  9. linux基础正则

    1.^word #匹配word开头的内容,vi/vim编辑器里^代表一行的开头. 2.word$ #匹配以word结尾的内容,vi/vim编辑器里$代表一行的结尾. 3.^$ #表示空行 4.. #代 ...

  10. 《黑白团团队》第八次团队作业:Alpha冲刺 第四天

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. 第四天 日期:2019/6/18 成员 ...