display：flex不兼容Android、Safari低版本的解决方案 【flex布局】
2024-09-07 02:30:14
引自 http://www.cnblogs.com/shimily/articles/7943370.html
<!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>
最新文章
- 【java手记】------------------------java中转发和重定向区别
- SQL Server 用SSMS查看依赖关系有时候不准确，改用代码查
- 夺命雷公狗ThinkPHP项目之----企业网站3之后台栏目页的搭建（百度编辑器的引入）
- 160902、Ionic、Angularjs、Cordova搭建Android开发环境
- 2.精通前端系列技术之seajs和gruntJs结合开发（三）
- WPF自定义控件（三）——Window
- Hibernate--基本映射标签和属性介绍
- mysql中的group_concat函数的用法
- Android应用程序的Activity启动过程简要介绍和学习计划
- Unity 4.6 uGUI的点击事件
- UVA 12083 POJ 2771 Guardian of Decency
- Android开发之基于监听的事件处理
- Kinect 骨骼追踪数据的处理方法
- pytorch预训练
- ViewPager中Fragment的重复创建、复用问题
- DBX error:Driver could not be properly initialized .... 解决办法
- Python内置模块的几点笔记
- 一个二维码如何自动识别是安卓（Android）还是苹果(IOS)
- Dubbo启动时检查
- 纯css3实现文字间歇滚动效果