转：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, ...
随机推荐
- win10 php7.2 nginx 安装 imagick，适用于phpstudy
imagick 拓展的下载地址 https://windows.php.net/downloads/pecl/releases/imagick/ 可惜的是这个地址最新版没有php7.2, 如果是7.1 ...
- Css学习(2)
1 标签分类(显示方式) 块元素 典型代表,Div,h1-h6,p,ul,li 特点: ★独占一行 ★可以设置宽高 ★ 嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致. 行内元素 ...
- keras训练和保存
https://cloud.tencent.com/developer/article/1010815 8.更科学地模型训练与模型保存 filepath = 'model-ep{epoch:03d}- ...
- JavaBean转xml
JavaBean转xml的工具就是:XStream XStream的作用: XStream可以把JavaBean对象转换成XML!通常服务器向客户端响应的数据都是来自数据库的一组对象,当我们不能直接把 ...
- tkinter简单使用
第一个运行程序 # -*- coding: utf-8 -*- import tkinter as tk //引入 root = tk.Tk() // 实例化root T大写k小写 root.titl ...
- studio2.3app签名打包安装失败，找不到签名证书。
Androidstudio升级到2.3后,打包时和之前不一样了. 如果只选择V2,是未签名的.所以要把V1和V2都打勾.
- 新的开始 接触ASP.NET Core跨平台的框架
今天我刚学习了使用Visual Studio 2015新建了.NET Core项目写了一个小的CSHTML代码.按我的话说就是,把C#和HTML合起来使用了,写了一个简单的关于学生的“增” “删” “ ...
- Windows Server 2016 启用完整版任务管理器
众所周知 Windows Server 2012以上的任务管理器是被阉割过的 那么如何启用呢?首先把你的任务管理器复制一份出来位置:系统盘\Windows\System32\Taskmgr.exe和系 ...
- 查看计算机CPU、内存使用情况
Shift + Ctrl + Esc,打开Windows任务管理器,点击性能,如图: 可以清楚的看到整台机子的CPU.内存使用情况,其中CPU使用记录下有8个小窗口,因为博主的CPU是8核的,讲讲CP ...
- vue-cli 项目搭建
vue-cli 项目搭建 1.首先需要安装nodejs(安装省略). 2.用node安装vue-cli. npm install -g vue-cli 3.新建目录用来存放工程. 新建一个vue项 ...