您的位置：首页 > 其它

弹性布局兼容例子

2017-01-12 16:17 183 查看

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body,
html {
width: 100%;
height: 100%;
}

body {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
-webkit-flex-direction: column;
}

.hade {
width: 100%;
height: 70px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
flex-direction: row;
-webkit-flex-direction: row;
}

.sz {
width: 200px;
background: salmon;
}

.sy {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
flex: 1;
-webkit-flex: 1;
background: seagreen;
min-width:300px;
}

.content {
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
flex-direction: row;
-webkit-flex-direction: row;
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
flex: 1;
-webkit-flex: 1;
}

.syc {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
margin: 50px auto;
background: gary;
}

.z1 {
width: 50%;
background: red;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
flex-direction: row;
-webkit-flex-direction: row;
}

.z2 {
box-flex: 4;
-webkit-box-flex: 4;
-moz-box-flex: 4;
flex: 4;
-webkit-flex: 4;
background: salmon;
}

.z3 {
box-flex: 2;
-webkit-box-flex: 2;
-moz-box-flex: 2;
flex: 2;
-webkit-flex: 2;
background: magenta;
}

.z1a {
float: left;
width: 300px;
}
</style>
</head>

<body>
<div class="hade">
<div class="sz">上左宽高固定</div>
<div>上中宽高不给</div>
<div class="sy">
<div class="syc">测试</div>
</div>
</div>
<div class="content">
<div class="z1">
<div class="z1a">haha1</div>
<div class="z1a">haha2</div>
<div class="z1a">haha3</div>
</div>
<div class="z2">中部宽高自适应</div>
<div class="z3">中部宽高自适应</div>
</div>
<div class="footer">底</div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 弹性布局兼容例子

相关文章推荐

新的分享

章节导航