转：display：flex不兼容Android、Safari低版本的解决方案 【flex布局】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flexbox布局</title>
<style>
div {
border: 1px solid #000;
overflow: hidden;
}
div.flex-h:before, div.flex-v:before {
content: "before";
}
div.flex-h:after, div.flex-v:after {
content: "after";
}
.w60 {
width: 60px;
}
.w150 {
width: 150px;
}
.w200 {
width: 200px;
}
.h30 {
height: 30px;
}
.h50 {
height: 50px;
}
/* 父元素-flex容器 */
.flex {
display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* 子元素-平均分栏 */
.flex1 {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* 父元素-横向排列（主轴） */
.flex-h {
display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ /* 09版 */
-webkit-box-orient: horizontal;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
/* 父元素-横向换行 */
.flex-hw {
/* 09版 */
-webkit-box-lines: multiple;
/* 12版 */
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
/* 父元素-水平居中（主轴是横向才生效） */
.flex-hc {
/* 09版 */
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 其它取值如下：
align-items 主轴原点方向对齐
flex-end 主轴延伸方向对齐
space-between 等间距排列，首尾不留白
space-around 等间距排列，首尾留白
*/
}
/* 父元素-纵向排列（主轴） */
.flex-v {
display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ /* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
/* 父元素-纵向换行 */
.flex-vw {
/* 09版 */
-webkit-box-lines: multiple;
/* 12版 */
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
/* 父元素-竖直居中（主轴是横向才生效） */
.flex-vc {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
} .flex-1 {
-webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
-ms-flex-order: 1; /* TWEENER - IE 10 */
-webkit-order: 1; /* NEW - Chrome */
order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex-2 {
-webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
-ms-flex-order: 2; /* TWEENER - IE 10 */
-webkit-order: 2; /* NEW - Chrome */
order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
</style>
</head>
<body>
<p>平均水平分3栏</p>
<div class="flex-h w150 h50">
<div class="flex1">文字文字文字文字文字文字文字</div>
<div class="flex1">text text text text text text text text</div>
<div class="flex1">文字文字文字文字文字文字文字</div>
</div>
<p>平均水平分4栏</p>
<div class="flex-h w150 h50">
<div class="flex1">文字文字文字文字文字文字文字</div>
<div class="flex1">text text text text text text text text</div>
<div class="flex1">文字文字文字文字文字文字文字</div>
<div class="flex1">text text text text text text text text</div>
</div>
<p>纵向排列</p>
<div class="flex-v w150 h50">
<div class="flex1 w60 h50">文字文字文字文字文字文字文字</div>
<div class="flex1 w60 h50">text text text text text text text text</div>
<div class="flex1 w60 h50">文字文字文字文字文字文字文字</div>
<div class="flex1 w60 h50">text text text text text text text text</div>
</div>
<p>横向排列 + 横向换行</p>
<div class="flex-h w150 h50 flex-hw">
<div class="w60 h50">文字文字文字文字文字文字文字</div>
<div class="w60 h50">text text text text text text text text</div>
<div class="w60 h50">文字文字文字文字文字文字文字</div>
<div class="w60 h50">text text text text text text text text</div>
</div>
<h6>Android4.2.2不支持换行</h6>
<p>竖直居中</p>
<div class="flex-h flex-vc w200 h50">
<div class="w60 h30">文字文字文字文字文字文字文字</div>
<div class="w60 h30">text text text text text text text text</div>
</div>
<p>水平居中</p>
<div class="flex-h flex-hc w200 h50">
<div class="w60 h30">文字文字文字文字文字文字文字</div>
<div class="w60 h30">text text text text text text text text</div>
</div>
<p>居中</p>
<div class="flex-h flex-hc flex-vc w200 h50">
<div class="w60 h30">文字文字文字文字文字文字文字</div>
<div class="w60 h30">text text text text text text text text</div>
</div>
<p>改变顺序（栅格布局，最终效果英文应该在左边）</p>
<div class="flex-h w200 h50">
<div class="flex1 flex-2">文字文字文字文字文字文字文字</div>
<div class="flex1 flex-1">text text text text text text text text</div>
</div>
<h6>Android4.2.2下伪元素位置表现不一致</h6>
</body>
</html>
原文: https://blog.csdn.net/sq2879897094/article/details/80593293
转：display：flex不兼容Android、Safari低版本的解决方案 【flex布局】的更多相关文章
- display：flex不兼容Android、Safari低版本的解决方案 【flex布局】
引自 http://www.cnblogs.com/shimily/articles/7943370.html <!DOCTYPE html> <html lang="en ...
- Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决
Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...
- [iOS开发]Xcode8兼容iOS7以及低版本Xcode调试高版本iOS系统
现在的项目一般都要兼容iOS7系统,同时也要兼容iOS10,在Xcode8上面,默认情况下无法调试iOS7,因为缺乏调试iOS7需要的配置文件.同时在低版本的Xcode上面(8以下),也无法调试iOS ...
- Xcode8兼容iOS7以及低版本Xcode调试高版本iOS系统
我们使用Xcode8新建的工程,默认支持的最低系统是iOS8,我们可以手动更改版本到7.0,但是不支持真机调试. 现在的项目一般都要兼容iOS7系统,同时也要兼容iOS10,在Xcode8上面,默认情 ...
- Android 之低版本高版本实现沉浸式状态栏
沉浸式状态栏确切的说应该叫做透明状态栏.一般情况下,状态栏的底色都为黑色,而沉浸式状态栏则是把状态栏设置为透明或者半透明. 沉浸式状态栏是从android Kitkat(Android 4.4)开始出 ...
- IOS:兼容ios6和低版本
viewDidUnload在ios6开始被弃用了,所以我们在这里处理内存警告的这类问题,这个时候我们就要把相应的处理放在 didReceiveMemoryWarning中. - (void)didRe ...
- android popupwindow低版本报空指针
在项目中使用Popupwindow pop=new Popupwindow();在2.3版本报 异常信息: Exception: null 堆栈信息: android.widget.PopupWind ...
- Fundebug前端JavaScript插件更新至1.8.0，兼容低版本的Android浏览器
摘要: 兼容低版本Android浏览器,请大家及时更新. Fundebug前端BUG监控服务 Fundebug是专业的程序BUG监控平台,我们JavaScript插件可以提供全方位的BUG监控,可以帮 ...
- ie低版本内核事件兼容问题（事件绑定，绑定事件自动执行，文档模式问题）
问题情况 搜狗等,兼容模式下,以前前端写的点击事件的代码没有, 后来一看是因为兼容模式为9,导致点击事件失效 解决办法,步骤 1,处理绑定事件兼容问题 ie低版本绑定事件只支持attactevent, ...
随机推荐
- 转:JavaScript Reference for Microsoft Dynamics CRM 2011 / 2013
JavaScript Reference for Microsoft Dynamics CRM 2011 / 2013 98 Replies Here’s a quick reference guid ...
- delphi打开项目提示unable to find resource on dll projects
用记事本打开*.dof文件, 把这行[Resource DLL Projects]及它的所属的内容删除就行了.
- cocos源码分析--绘制顺序LocalZOrder、GlobalZOrder、OrderOfArrival
使用规则 节点的渲染顺序跟节点的三个成员变量有关(_localZOrder._globalZOrder._orderOfArrival)分别对应三个设置函数setLocalZOrder.setGlob ...
- Memory Translation and Segmentation.内存地址转换与分段
原文标题:Memory Translation and Segmentation 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限,只好挑一些国外高手的精 ...
- C# 如何提取字符串中的数字(小技巧)
下面讲解如何在字符串当中抓取到数字 方法一.使用正则表达式 1.纯数字提取 1 string str = "提取123abc提取"; //我们抓取当前字符当中的123 2 stri ...
- spring boot整合quartz实现多个定时任务
版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/liuchuanhong1/article/details/78543574 最近收到了很多封邮件, ...
- 五大排序算法（Python）
冒泡排序 冒泡排序通常是在CS入门课程中教的,因为它清楚地演示了排序是如何工作的,同时又简单易懂.冒泡排序步骤遍历列表并比较相邻的元素对.如果元素顺序错误,则交换它们.重复遍历列表未排序部分的元素,直 ...
- (转)日期类型的input元素设置默认值为当天
原文地址 html5的form元素对日期时间有丰富的支持 <input type="date"> <input type="time"> ...
- django中路由系统和视图的对应关系（值的传递）-->主要内容（位置参数、关键字参数、额外参数、include分组[urls的分发]、命名分组、反向解析、APPEND_SLASH）
路由系统也就是 urls.py文件,视图就是 views.py文件 路由系统里面要注意的事项 urlpatterns中的元素按照书写顺序从上往下逐一匹配正则表达式,一旦匹配成功则不再继续. 若要从UR ...
- fabric-sdk-java在IDEA中的使用
尝试使用fabric-sdk-java来连接fabric区块链. fabric的安装可参考 http://www.cnblogs.com/maobuji/p/7204446.html 环境准备: JD ...