关于flex布局中的兼容性问题
这几天在做项目中用到了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布局中的兼容性问题的更多相关文章
- flex布局中flex-basis|flex-grow|flex-shrink
flex布局中flex-basis|flex-grow|flex-shrink 整个才是正确的算法 flex-basis(基准值) 可以设置flex布局中容器的宽度,如果同时存在width属性,将把它 ...
- flex布局中flex-grow与flex-shrink的计算方式
CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局,其中决定 Flex 布局内项目宽度/高度的是三个属性: flex-basis, flex-grow, flex-shrink. flex ...
- svg矢量图在flex布局中样式扭曲的问题
问题机型 小米5 华为nova 其他未知的可能机型 问题描述 利用flex 布局的一行中, 左一样式: -webkit-box-flex: 0; flex: 0 1 auto; 左二样式: -webk ...
- flex布局中transform出错
在flex布局下,若应用transform 的动画的子元素没有使用进行定位,则动画过程中,子元素将相对display:flex的元素进行static定位 动画结束后位置正常: 修复代码只需要posit ...
- flex布局中flex属性运用在随机发红包的算法上
flex布局是现在前端基本上都会运用的一种布局,基本上用到比较多的是父元素设置display:flex,两个子元素,一个设置固定宽度,另一个设置为flex:1(这里都指flex-direction为r ...
- flex布局中父容器属性部分演示效果
如图可见flex的属性分为父容器和子容器的属性共12个.关于这些属性具体代表什么意思,网上有很多教程的文章,自觉不能写得比别人更好,所以这里主要写了一些例子关于父容器属性效果的演示,希望可以帮助大家理 ...
- 微信小程序-flex布局中align-items和align-self区别
首先看看菜鸟教程中关于align-items和align-self的定义 align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式.(对 ...
- flex布局中flex-shrink的计算规则
下面代码来自MDN html部分: <p>the width of content is 500px, flex-basic of flex item is 120px.</p> ...
- flex布局中的主轴和侧轴的确定
1.主轴和侧轴是通过flex-direction确定的 如果flex-direction是row或者row-reverse,那么主轴就是justify-contain 如果flex-direction ...
随机推荐
- Kinect安装与配置(openNI2)
原文链接:http://blog.csdn.net/chenxin_130/article/details/8580636 简介 最近OpenNI2的推出,小斤也要多给博客除除草了,并在闲暇之余做一些 ...
- Kafka学习笔记(4)----Kafka的Leader Election
1. Zookeeper的基本操作 zookeeper中的节点可以持久化/有序的两个维度分为四种类型: PERSIST:持久化无序(保存在磁盘中) PERSIST_SEQUENTIAL:持久化有序递增 ...
- 图表库 - Highchart / Echart
当前主要使用HighChart和Echart图表库,都基于Jquery,需要先引用Jquery. 实际问题:引入Jquery需在图表库前,否则报错. HighChart官网:https://www.h ...
- Python——Day1(笔记代码)
#print('Hello World')"""n1=input('请输入用户名:')print(n1)n2=input('请输入密码:')print(n2)" ...
- tsar采集数据原理
系统模块 cpu 字段含义 user: 表示CPU执行用户进程的时间,通常期望用户空间CPU越高越好. sys: 表示CPU在内核运行时间,系统CPU占用率高,表明系统某部分存在瓶颈.通常值越低越好. ...
- C++基础 (5) 第五天 重载new delete () 只能操作符 自定义string类
1 昨日回顾 1.static 对整个类共享 可以直接用 类::方法 调用 如果是私有的 可以提供一个静态的访问静态成员的方法 2 自定义的数组类-重载操作符[] 3 重载new和delete 4 重 ...
- N3-2 - 树 - binary-tree-level-order-traversal-ii
题目描述: Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, fro ...
- centos7把编译安装的服务通过systemctl管理
nginx编译安装的目录是/usr/local/nginx nginx配置文件是/usr/local/nginx/conf/nginx.conf systemctl管理的服务文件在/usr/lib/s ...
- 谈谈python里面关于任务队列
谈谈python里面关于任务队列 为什么要做任务队列 要回答这个问题我们首先看看在流水线上的案列,如果人的速度很慢,机器的速度比人的速度快很多,就会造成,机器生产的东西没有及时处理,越积越多,造成阻塞 ...
- php 安装mysql扩展注意事项
1.yum search php-mysql (Linux环境) 这一点,根据具体的情况会遇到不同的搜索结果.我搜索到的结果是:php-mysql.i386 : A module for PHP ap ...